@schukai/monster 4.45.5 → 4.46.0

package/source/components/layout/slider.mjs

@@ -14,8 +14,8 @@ import { instanceSymbol } from "../../constants.mjs";
 import { ATTRIBUTE_PREFIX, ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
 import { CustomElement, getSlottedElements } from "../../dom/customelement.mjs";
 import {
-  assembleMethodSymbol,
-  registerCustomElement,
+	assembleMethodSymbol,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { SliderStyleSheet } from "./stylesheet/slider.mjs";
 import { fireCustomEvent } from "../../dom/events.mjs";
@@ -83,226 +83,226 @@ const configSymbol = Symbol("config");
  * @fires monster-slider-moved - Fired when the slider moves to a new slide.
  */
 class Slider extends CustomElement {
-  /**
-   * This method is called by the `instanceof` operator.
-   * @return {symbol}
-   */
-  static get [instanceSymbol]() {
-    return Symbol.for("@schukai/monster/components/layout/slider@@instance");
-  }
-
-  /**
-   *
-   * @return {Components.Layout.Slider
-   */
-  [assembleMethodSymbol]() {
-    super[assembleMethodSymbol]();
-
-    this[configSymbol] = {
-      currentIndex: 0,
-
-      isDragging: false,
-      draggingPos: 0,
-      startPos: 0,
-      autoPlayInterval: null,
-      resizeObserver: null, // Store the observer for later cleanup
-
-      eventHandler: {
-        mouseOverPause: null,
-        mouseout: null,
-        touchstart: null,
-        touchend: null,
-      },
-    };
-
-    // Set the CSS custom property for slide width based on visible slides.
-    const slides = this.shadowRoot.querySelector(
-      `[${ATTRIBUTE_ROLE}="slider"]`,
-    );
-
-    const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
-    slides.style.setProperty(
-      "--monster-slides-width",
-      `${100 / slidesVisible}%`,
-    );
-
-    initControlReferences.call(this);
-    initEventHandler.call(this);
-    initStructure.call(this);
-
-    return this;
-  }
-
-  /**
-   * Called when the element is removed from the DOM.
-   * Cleans up intervals, observers, and event listeners to prevent memory leaks.
-   */
-  disconnectedCallback() {
-    // Check if super.disconnectedCallback exists and call it
-    if (super.disconnectedCallback) {
-      super.disconnectedCallback();
-    }
-
-    this.stopAutoPlay(); // Clear interval
-
-    // Disconnect the ResizeObserver
-    if (this[configSymbol]?.resizeObserver) {
-      this[configSymbol].resizeObserver.disconnect();
-      this[configSymbol].resizeObserver = null;
-    }
-
-    // Remove autoplay-related event listeners
-    if (this[configSymbol]?.eventHandler) {
-      const { mouseOverPause, mouseout, touchstart, touchend } =
-        this[configSymbol].eventHandler;
-
-      if (mouseOverPause) {
-        this.removeEventListener("mouseover", mouseOverPause);
-        this[configSymbol].eventHandler.mouseOverPause = null;
-      }
-      if (mouseout) {
-        this.removeEventListener("mouseout", mouseout);
-        this[configSymbol].eventHandler.mouseout = null;
-      }
-      if (touchstart) {
-        this.removeEventListener("touchstart", touchstart);
-        this[configSymbol].eventHandler.touchstart = null;
-      }
-      if (touchend) {
-        this.removeEventListener("touchend", touchend);
-        this[configSymbol].eventHandler.touchend = null;
-      }
-    }
-  }
-
-  /**
-   * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
-   * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-   *
-   * The individual configuration values can be found in the table.
-   *
-   * @property {Object} templates Template definitions
-   * @property {string} templates.main Main template
-   * @property {Object} features Features
-   * @property {boolean} features.carousel Carousel feature (infinite looping)
-   * @property {boolean} features.autoPlay Auto play feature
-   * @property {boolean} features.thumbnails Thumbnails feature
-   * @property {boolean} features.drag Drag feature (touch and mouse)
-   * @property {Object} slides Slides configuration, an object with breakpoints and the number of slides to show
-   * @property {Object} slides.0 Number of slides to show at 0px
-   * @property {Object} slides.600 Number of slides to show at 600px @since 3.109.0
-   * @property {Object} slides.1200 Number of slides to show at 1200px @since 3.109.0
-   * @property {Object} slides.1800 Number of slides to show at 1800px @since 3.109.0
-   * @property {Object} carousel Carousel configuration
-   * @property {number} carousel.transition Duration (ms) of the carousel 'jump' animation when looping.
-   * @property {Object} autoPlay Auto play configuration
-   * @property {number} autoPlay.delay Delay in ms between slide transitions
-   * @property {number} autoPlay.startDelay Delay in ms before autoplay starts
-   * @property {string} autoPlay.direction Direction of the autoplay ("next" or "prev")
-   * @property {boolean} autoPlay.mouseOverPause Pause on mouse over
-   * @property {boolean} autoPlay.touchPause Pause on touch
-   * @property {Object} classes CSS classes
-   * @property {boolean} disabled Disabled state
-   */
-  get defaults() {
-    return Object.assign({}, super.defaults, {
-      templates: {
-        main: getTemplate(),
-      },
-
-      classes: {},
-      disabled: false,
-
-      features: {
-        carousel: true,
-        autoPlay: true,
-        thumbnails: true,
-        drag: true,
-      },
-
-      slides: {
-        0: 1,
-        600: 2,
-        1200: 3,
-        1800: 4,
-      },
-
-      carousel: {
-        transition: 250,
-      },
-
-      autoPlay: {
-        delay: 1500,
-        startDelay: 1000,
-        direction: "next",
-        mouseOverPause: true,
-        touchPause: true,
-      },
-    });
-  }
-
-  /**
-   * @return {string}
-   */
-  static getTag() {
-    return "monster-slider";
-  }
-
-  /**
-   * @return {CSSStyleSheet[]}
-   */
-  static getCSSStyleSheet() {
-    return [SliderStyleSheet];
-  }
-
-  /**
-   * Moves the slider to the given index.
-   *
-   * @param {number} index - The slide index to move to.
-   * @return {void}
-   */
-  moveTo(index) {
-    return moveTo.call(this, index);
-  }
-
-  /**
-   * Shows the previous slide.
-   *
-   * @return {void}
-   */
-  previous() {
-    return prev.call(this);
-  }
-
-  /**
-   * Shows the next slide.
-   *
-   * @return {void}
-   */
-  next() {
-    return next.call(this);
-  }
-
-  /**
-   * Stops the auto play.
-   *
-   * @return {void}
-   */
-  stopAutoPlay() {
-    if (this[configSymbol].autoPlayInterval) {
-      clearInterval(this[configSymbol].autoPlayInterval);
-      this[configSymbol].autoPlayInterval = null;
-    }
-  }
-
-  /**
-   * Starts the auto play.
-   *
-   * @return {void}
-   */
-  startAutoPlay() {
-    initAutoPlay.call(this);
-  }
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/layout/slider@@instance");
+	}
+
+	/**
+	 *
+	 * @return {Components.Layout.Slider
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		this[configSymbol] = {
+			currentIndex: 0,
+
+			isDragging: false,
+			draggingPos: 0,
+			startPos: 0,
+			autoPlayInterval: null,
+			resizeObserver: null, // Store the observer for later cleanup
+
+			eventHandler: {
+				mouseOverPause: null,
+				mouseout: null,
+				touchstart: null,
+				touchend: null,
+			},
+		};
+
+		// Set the CSS custom property for slide width based on visible slides.
+		const slides = this.shadowRoot.querySelector(
+			`[${ATTRIBUTE_ROLE}="slider"]`,
+		);
+
+		const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
+		slides.style.setProperty(
+			"--monster-slides-width",
+			`${100 / slidesVisible}%`,
+		);
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		initStructure.call(this);
+
+		return this;
+	}
+
+	/**
+	 * Called when the element is removed from the DOM.
+	 * Cleans up intervals, observers, and event listeners to prevent memory leaks.
+	 */
+	disconnectedCallback() {
+		// Check if super.disconnectedCallback exists and call it
+		if (super.disconnectedCallback) {
+			super.disconnectedCallback();
+		}
+
+		this.stopAutoPlay(); // Clear interval
+
+		// Disconnect the ResizeObserver
+		if (this[configSymbol]?.resizeObserver) {
+			this[configSymbol].resizeObserver.disconnect();
+			this[configSymbol].resizeObserver = null;
+		}
+
+		// Remove autoplay-related event listeners
+		if (this[configSymbol]?.eventHandler) {
+			const { mouseOverPause, mouseout, touchstart, touchend } =
+				this[configSymbol].eventHandler;
+
+			if (mouseOverPause) {
+				this.removeEventListener("mouseover", mouseOverPause);
+				this[configSymbol].eventHandler.mouseOverPause = null;
+			}
+			if (mouseout) {
+				this.removeEventListener("mouseout", mouseout);
+				this[configSymbol].eventHandler.mouseout = null;
+			}
+			if (touchstart) {
+				this.removeEventListener("touchstart", touchstart);
+				this[configSymbol].eventHandler.touchstart = null;
+			}
+			if (touchend) {
+				this.removeEventListener("touchend", touchend);
+				this[configSymbol].eventHandler.touchend = null;
+			}
+		}
+	}
+
+	/**
+	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {Object} features Features
+	 * @property {boolean} features.carousel Carousel feature (infinite looping)
+	 * @property {boolean} features.autoPlay Auto play feature
+	 * @property {boolean} features.thumbnails Thumbnails feature
+	 * @property {boolean} features.drag Drag feature (touch and mouse)
+	 * @property {Object} slides Slides configuration, an object with breakpoints and the number of slides to show
+	 * @property {Object} slides.0 Number of slides to show at 0px
+	 * @property {Object} slides.600 Number of slides to show at 600px @since 3.109.0
+	 * @property {Object} slides.1200 Number of slides to show at 1200px @since 3.109.0
+	 * @property {Object} slides.1800 Number of slides to show at 1800px @since 3.109.0
+	 * @property {Object} carousel Carousel configuration
+	 * @property {number} carousel.transition Duration (ms) of the carousel 'jump' animation when looping.
+	 * @property {Object} autoPlay Auto play configuration
+	 * @property {number} autoPlay.delay Delay in ms between slide transitions
+	 * @property {number} autoPlay.startDelay Delay in ms before autoplay starts
+	 * @property {string} autoPlay.direction Direction of the autoplay ("next" or "prev")
+	 * @property {boolean} autoPlay.mouseOverPause Pause on mouse over
+	 * @property {boolean} autoPlay.touchPause Pause on touch
+	 * @property {Object} classes CSS classes
+	 * @property {boolean} disabled Disabled state
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			classes: {},
+			disabled: false,
+
+			features: {
+				carousel: true,
+				autoPlay: true,
+				thumbnails: true,
+				drag: true,
+			},
+
+			slides: {
+				0: 1,
+				600: 2,
+				1200: 3,
+				1800: 4,
+			},
+
+			carousel: {
+				transition: 250,
+			},
+
+			autoPlay: {
+				delay: 1500,
+				startDelay: 1000,
+				direction: "next",
+				mouseOverPause: true,
+				touchPause: true,
+			},
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-slider";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [SliderStyleSheet];
+	}
+
+	/**
+	 * Moves the slider to the given index.
+	 *
+	 * @param {number} index - The slide index to move to.
+	 * @return {void}
+	 */
+	moveTo(index) {
+		return moveTo.call(this, index);
+	}
+
+	/**
+	 * Shows the previous slide.
+	 *
+	 * @return {void}
+	 */
+	previous() {
+		return prev.call(this);
+	}
+
+	/**
+	 * Shows the next slide.
+	 *
+	 * @return {void}
+	 */
+	next() {
+		return next.call(this);
+	}
+
+	/**
+	 * Stops the auto play.
+	 *
+	 * @return {void}
+	 */
+	stopAutoPlay() {
+		if (this[configSymbol].autoPlayInterval) {
+			clearInterval(this[configSymbol].autoPlayInterval);
+			this[configSymbol].autoPlayInterval = null;
+		}
+	}
+
+	/**
+	 * Starts the auto play.
+	 *
+	 * @return {void}
+	 */
+	startAutoPlay() {
+		initAutoPlay.call(this);
+	}
 }
 
 /**
@@ -310,16 +310,16 @@ class Slider extends CustomElement {
  * @description Initializes the component structure, thumbnails, and autoplay.
  */
 function initStructure() {
-  if (this.getOption("features.thumbnails")) {
-    initThumbnails.call(this);
-  }
+	if (this.getOption("features.thumbnails")) {
+		initThumbnails.call(this);
+	}
 
-  // Clones slides if carousel mode is active
-  initCarouselClones.call(this);
+	// Clones slides if carousel mode is active
+	initCarouselClones.call(this);
 
-  if (this.getOption("features.autoPlay")) {
-    initAutoPlay.call(this);
-  }
+	if (this.getOption("features.autoPlay")) {
+		initAutoPlay.call(this);
+	}
 }
 
 /**
@@ -327,43 +327,43 @@ function initStructure() {
  * @description Generates the thumbnail navigation elements.
  */
 function initThumbnails() {
-  const self = this;
-  const thumbnails = this.shadowRoot.querySelector(
-    "[data-monster-role='thumbnails']",
-  );
-
-  // Clear existing thumbnails before regenerating
-  while (thumbnails.firstChild) {
-    thumbnails.removeChild(thumbnails.firstChild);
-  }
-
-  const { originSlides } = getSlidesAndTotal.call(this);
-
-  originSlides.forEach((x, index) => {
-    const thumbnail = document.createElement("div");
-    thumbnail.classList.add("thumbnail");
-    thumbnail.addEventListener("click", () => {
-      this.moveTo(index);
-    });
-
-    thumbnails.appendChild(thumbnail);
-  });
-
-  // Listen for move events to update the active thumbnail
-  this.addEventListener("monster-slider-moved", (e) => {
-    const index = e.detail.index;
-    const thumbnail = thumbnails.children[index];
-
-    if (!thumbnail) {
-      return;
-    }
-
-    Array.from(thumbnails.children).forEach((thumb) => {
-      thumb.classList.remove("current");
-    });
-
-    thumbnail.classList.add("current");
-  });
+	const self = this;
+	const thumbnails = this.shadowRoot.querySelector(
+		"[data-monster-role='thumbnails']",
+	);
+
+	// Clear existing thumbnails before regenerating
+	while (thumbnails.firstChild) {
+		thumbnails.removeChild(thumbnails.firstChild);
+	}
+
+	const { originSlides } = getSlidesAndTotal.call(this);
+
+	originSlides.forEach((x, index) => {
+		const thumbnail = document.createElement("div");
+		thumbnail.classList.add("thumbnail");
+		thumbnail.addEventListener("click", () => {
+			this.moveTo(index);
+		});
+
+		thumbnails.appendChild(thumbnail);
+	});
+
+	// Listen for move events to update the active thumbnail
+	this.addEventListener("monster-slider-moved", (e) => {
+		const index = e.detail.index;
+		const thumbnail = thumbnails.children[index];
+
+		if (!thumbnail) {
+			return;
+		}
+
+		Array.from(thumbnails.children).forEach((thumb) => {
+			thumb.classList.remove("current");
+		});
+
+		thumbnail.classList.add("current");
+	});
 }
 
 /**
@@ -371,110 +371,110 @@ function initThumbnails() {
  * @description Initializes the autoplay functionality and its event handlers.
  */
 function initAutoPlay() {
-  const self = this;
-
-  if (this.getOption("features.autoPlay") === false) {
-    return;
-  }
-
-  const autoPlay = this.getOption("autoPlay");
-  if (!isObject(autoPlay)) {
-    return;
-  }
-  const delay = autoPlay.delay;
-  const startDelay = autoPlay.startDelay;
-  const direction = autoPlay.direction;
-
-  function start() {
-    // Clear any existing interval before starting a new one
-    if (self[configSymbol].autoPlayInterval) {
-      clearInterval(self[configSymbol].autoPlayInterval);
-    }
-
-    self[configSymbol].autoPlayInterval = setInterval(() => {
-      const { totalOriginSlides } = getSlidesAndTotal.call(self);
-
-      if (direction === "next") {
-        // Check if carousel looping is disabled and we're at the end
-        if (
-          !self.getOption("features.carousel") &&
-          self[configSymbol].currentIndex >= totalOriginSlides - 1
-        ) {
-          self[configSymbol].currentIndex = -1;
-        }
-        self.next();
-      } else {
-        // Check if carousel looping is disabled and we're at the beginning
-        if (
-          !self.getOption("features.carousel") &&
-          self[configSymbol].currentIndex <= 0
-        ) {
-          self[configSymbol].currentIndex = totalOriginSlides;
-        }
-        self.previous();
-      }
-    }, delay);
-  }
-
-  setTimeout(() => {
-    start();
-  }, startDelay);
-
-  // Add listeners for pause-on-hover
-  if (autoPlay.mouseOverPause) {
-    if (this[configSymbol].eventHandler.mouseOverPause === null) {
-      this[configSymbol].eventHandler.mouseOverPause = () => {
-        clearInterval(this[configSymbol].autoPlayInterval);
-      };
-
-      this.addEventListener(
-        "mouseover",
-        this[configSymbol].eventHandler.mouseOverPause,
-      );
-    }
-
-    if (this[configSymbol].eventHandler.mouseout === null) {
-      this[configSymbol].eventHandler.mouseout = () => {
-        if (this[configSymbol].isDragging) {
-          return;
-        }
-        start();
-      };
-
-      this.addEventListener(
-        "mouseout",
-        this[configSymbol].eventHandler.mouseout,
-      );
-    }
-  }
-
-  // Add listeners for pause-on-touch
-  if (autoPlay.touchPause) {
-    if (this[configSymbol].eventHandler.touchstart === null) {
-      this[configSymbol].eventHandler.touchstart = () => {
-        clearInterval(this[configSymbol].autoPlayInterval);
-      };
-
-      this.addEventListener(
-        "touchstart",
-        this[configSymbol].eventHandler.touchstart,
-      );
-    }
-
-    if (this[configSymbol].eventHandler.touchend === null) {
-      this[configSymbol].eventHandler.touchend = () => {
-        if (this[configSymbol].isDragging) {
-          return;
-        }
-        start();
-      };
-
-      this.addEventListener(
-        "touchend",
-        this[configSymbol].eventHandler.touchend,
-      );
-    }
-  }
+	const self = this;
+
+	if (this.getOption("features.autoPlay") === false) {
+		return;
+	}
+
+	const autoPlay = this.getOption("autoPlay");
+	if (!isObject(autoPlay)) {
+		return;
+	}
+	const delay = autoPlay.delay;
+	const startDelay = autoPlay.startDelay;
+	const direction = autoPlay.direction;
+
+	function start() {
+		// Clear any existing interval before starting a new one
+		if (self[configSymbol].autoPlayInterval) {
+			clearInterval(self[configSymbol].autoPlayInterval);
+		}
+
+		self[configSymbol].autoPlayInterval = setInterval(() => {
+			const { totalOriginSlides } = getSlidesAndTotal.call(self);
+
+			if (direction === "next") {
+				// Check if carousel looping is disabled and we're at the end
+				if (
+					!self.getOption("features.carousel") &&
+					self[configSymbol].currentIndex >= totalOriginSlides - 1
+				) {
+					self[configSymbol].currentIndex = -1;
+				}
+				self.next();
+			} else {
+				// Check if carousel looping is disabled and we're at the beginning
+				if (
+					!self.getOption("features.carousel") &&
+					self[configSymbol].currentIndex <= 0
+				) {
+					self[configSymbol].currentIndex = totalOriginSlides;
+				}
+				self.previous();
+			}
+		}, delay);
+	}
+
+	setTimeout(() => {
+		start();
+	}, startDelay);
+
+	// Add listeners for pause-on-hover
+	if (autoPlay.mouseOverPause) {
+		if (this[configSymbol].eventHandler.mouseOverPause === null) {
+			this[configSymbol].eventHandler.mouseOverPause = () => {
+				clearInterval(this[configSymbol].autoPlayInterval);
+			};
+
+			this.addEventListener(
+				"mouseover",
+				this[configSymbol].eventHandler.mouseOverPause,
+			);
+		}
+
+		if (this[configSymbol].eventHandler.mouseout === null) {
+			this[configSymbol].eventHandler.mouseout = () => {
+				if (this[configSymbol].isDragging) {
+					return;
+				}
+				start();
+			};
+
+			this.addEventListener(
+				"mouseout",
+				this[configSymbol].eventHandler.mouseout,
+			);
+		}
+	}
+
+	// Add listeners for pause-on-touch
+	if (autoPlay.touchPause) {
+		if (this[configSymbol].eventHandler.touchstart === null) {
+			this[configSymbol].eventHandler.touchstart = () => {
+				clearInterval(this[configSymbol].autoPlayInterval);
+			};
+
+			this.addEventListener(
+				"touchstart",
+				this[configSymbol].eventHandler.touchstart,
+			);
+		}
+
+		if (this[configSymbol].eventHandler.touchend === null) {
+			this[configSymbol].eventHandler.touchend = () => {
+				if (this[configSymbol].isDragging) {
+					return;
+				}
+				start();
+			};
+
+			this.addEventListener(
+				"touchend",
+				this[configSymbol].eventHandler.touchend,
+			);
+		}
+	}
 }
 
 /**
@@ -483,30 +483,30 @@ function initAutoPlay() {
  * @return {number}
  */
 function getVisibleSlidesFromContainerWidth() {
-  const containerWidth = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="slider"]`,
-  ).offsetWidth;
-  const slides = this.getOption("slides");
-  let visibleSlides = 1;
-
-  if (!isObject(slides)) {
-    return visibleSlides;
-  }
-
-  // Find the largest breakpoint that is smaller than the current container width
-  for (const key in slides) {
-    if (containerWidth >= key) {
-      visibleSlides = slides[key];
-    }
-  }
-
-  const { originSlides } = getSlidesAndTotal.call(this);
-  // Ensure we don't try to show more slides than are available
-  if (visibleSlides > originSlides.length) {
-    visibleSlides = originSlides.length; // Fixed: was originSlides.length - 1
-  }
-
-  return visibleSlides;
+	const containerWidth = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="slider"]`,
+	).offsetWidth;
+	const slides = this.getOption("slides");
+	let visibleSlides = 1;
+
+	if (!isObject(slides)) {
+		return visibleSlides;
+	}
+
+	// Find the largest breakpoint that is smaller than the current container width
+	for (const key in slides) {
+		if (containerWidth >= key) {
+			visibleSlides = slides[key];
+		}
+	}
+
+	const { originSlides } = getSlidesAndTotal.call(this);
+	// Ensure we don't try to show more slides than are available
+	if (visibleSlides > originSlides.length) {
+		visibleSlides = originSlides.length; // Fixed: was originSlides.length - 1
+	}
+
+	return visibleSlides;
 }
 
 /**
@@ -514,36 +514,36 @@ function getVisibleSlidesFromContainerWidth() {
  * @description Clones slides to create the "infinite" loop effect for the carousel.
  */
 function initCarouselClones() {
-  const { slides, totalSlides } = getSlidesAndTotal.call(this);
-  const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
-
-  // Only clone if there are more slides than are visible
-  if (totalSlides > slidesVisible) {
-    // Clone slides from the beginning and append them to the end
-    let current = slides[0];
-    let last = slides[totalSlides - 1];
-    for (let i = 0; i < slidesVisible; i++) {
-      const clone = current.cloneNode(true);
-      clone.setAttribute("data-monster-clone-from", i);
-      last.insertAdjacentElement("afterend", clone);
-      current = current.nextElementSibling;
-      last = clone;
-    }
-
-    // Clone slides from the end and prepend them to the beginning
-    current = slides[totalSlides - 1];
-    let first = slides[0];
-    for (let i = 0; i < slidesVisible; i++) {
-      const clone = current.cloneNode(true);
-      // Fixed: Index was totalSlides - i, should be totalSlides - 1 - i
-      clone.setAttribute("data-monster-clone-from", totalSlides - 1 - i);
-      first.insertAdjacentElement("beforebegin", clone);
-      current = current.previousElementSibling;
-      first = clone;
-    }
-
-    moveTo.call(this, 0);
-  }
+	const { slides, totalSlides } = getSlidesAndTotal.call(this);
+	const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
+
+	// Only clone if there are more slides than are visible
+	if (totalSlides > slidesVisible) {
+		// Clone slides from the beginning and append them to the end
+		let current = slides[0];
+		let last = slides[totalSlides - 1];
+		for (let i = 0; i < slidesVisible; i++) {
+			const clone = current.cloneNode(true);
+			clone.setAttribute("data-monster-clone-from", i);
+			last.insertAdjacentElement("afterend", clone);
+			current = current.nextElementSibling;
+			last = clone;
+		}
+
+		// Clone slides from the end and prepend them to the beginning
+		current = slides[totalSlides - 1];
+		let first = slides[0];
+		for (let i = 0; i < slidesVisible; i++) {
+			const clone = current.cloneNode(true);
+			// Fixed: Index was totalSlides - i, should be totalSlides - 1 - i
+			clone.setAttribute("data-monster-clone-from", totalSlides - 1 - i);
+			first.insertAdjacentElement("beforebegin", clone);
+			current = current.previousElementSibling;
+			first = clone;
+		}
+
+		moveTo.call(this, 0);
+	}
 }
 
 /**
@@ -552,21 +552,21 @@ function initCarouselClones() {
  * @return {{slides: HTMLElement[], totalSlides: number, originSlides: HTMLElement[], totalOriginSlides: number}}
  */
 function getSlidesAndTotal() {
-  // Get only original slides (excluding clones)
-  const originSlides = Array.from(
-    getSlottedElements.call(
-      this,
-      ":scope:not([data-monster-clone-from])",
-      null,
-    ),
-  );
-  const totalOriginSlides = originSlides.length;
-
-  // Get all slides (including clones)
-  const slides = Array.from(getSlottedElements.call(this, ":scope", null));
-  const totalSlides = slides.length;
-
-  return { originSlides, totalOriginSlides, slides, totalSlides };
+	// Get only original slides (excluding clones)
+	const originSlides = Array.from(
+		getSlottedElements.call(
+			this,
+			":scope:not([data-monster-clone-from])",
+			null,
+		),
+	);
+	const totalOriginSlides = originSlides.length;
+
+	// Get all slides (including clones)
+	const slides = Array.from(getSlottedElements.call(this, ":scope", null));
+	const totalSlides = slides.length;
+
+	return { originSlides, totalOriginSlides, slides, totalSlides };
 }
 
 /**
@@ -575,15 +575,15 @@ function getSlidesAndTotal() {
  * @return {number}
  */
 function next() {
-  const nextIndex = this[configSymbol].currentIndex + 1;
+	const nextIndex = this[configSymbol].currentIndex + 1;
 
-  // Use requestAnimationFrame to ensure the move happens in the next frame,
-  // allowing CSS transitions to apply correctly.
-  getWindow().requestAnimationFrame(() => {
-    moveTo.call(this, nextIndex);
-  });
+	// Use requestAnimationFrame to ensure the move happens in the next frame,
+	// allowing CSS transitions to apply correctly.
+	getWindow().requestAnimationFrame(() => {
+		moveTo.call(this, nextIndex);
+	});
 
-  return 0;
+	return 0;
 }
 
 /**
@@ -592,14 +592,14 @@ function next() {
  * @return {number}
  */
 function prev() {
-  const prevIndex = this[configSymbol].currentIndex - 1;
+	const prevIndex = this[configSymbol].currentIndex - 1;
 
-  // Use requestAnimationFrame for smooth transitions
-  getWindow().requestAnimationFrame(() => {
-    moveTo.call(this, prevIndex);
-  });
+	// Use requestAnimationFrame for smooth transitions
+	getWindow().requestAnimationFrame(() => {
+		moveTo.call(this, prevIndex);
+	});
 
-  return 0;
+	return 0;
 }
 
 /**
@@ -609,27 +609,27 @@ function prev() {
  * @param {number} index - The target slide index.
  */
 function setMoveProperties(slides, index) {
-  // Remove 'current' class from all slides
-  slides.forEach((slide) => {
-    slide.classList.remove("current");
-  });
+	// Remove 'current' class from all slides
+	slides.forEach((slide) => {
+		slide.classList.remove("current");
+	});
 
-  let offset = -(index * 100);
-  const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
+	let offset = -(index * 100);
+	const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
 
-  offset = offset / slidesVisible;
+	offset = offset / slidesVisible;
 
-  if (offset !== 0) {
-    offset += "%";
-  }
+	if (offset !== 0) {
+		offset += "%";
+	}
 
-  this[sliderElementSymbol].style.transform =
-    `translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
+	this[sliderElementSymbol].style.transform =
+		`translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
 
-  if (slides[index]) {
-    slides[index].classList.add("current");
-  }
-  this[configSymbol].lastOffset = offset;
+	if (slides[index]) {
+		slides[index].classList.add("current");
+	}
+	this[configSymbol].lastOffset = offset;
 }
 
 /**
@@ -640,87 +640,87 @@ function setMoveProperties(slides, index) {
  * @fires monster-slider-moved
  */
 function moveTo(index, animation) {
-  const { slides, totalSlides, originSlides, totalOriginSlides } =
-    getSlidesAndTotal.call(this);
-
-  // Remove/add 'animate' class to enable/disable CSS transitions
-  if (animation === false) {
-    this[sliderElementSymbol].classList.remove("animate");
-  } else {
-    this[sliderElementSymbol].classList.add("animate");
-  }
-
-  // Handle carousel looping logic
-  if (this.getOption("features.carousel") === true) {
-    if (index < 0) {
-      index = -1; // Will trigger the "jump" to the end
-    }
-
-    if (index > totalOriginSlides) {
-      index = totalOriginSlides; // Will trigger the "jump" to the start
-    }
-  } else {
-    // Handle non-carousel boundary logic
-    if (index < 0) {
-      index = 0;
-    }
-
-    if (index >= totalOriginSlides) {
-      index = totalOriginSlides - 1;
-    }
-  }
-
-  if (!isInteger(index)) {
-    return;
-  }
-
-  const visibleSlides = getVisibleSlidesFromContainerWidth.call(this);
-
-  // Hide controls if all original slides are visible
-  if (totalOriginSlides <= visibleSlides) {
-    this[prevElementSymbol].classList.add("hidden");
-    this[nextElementSymbol].classList.add("hidden");
-    this[thumbnailElementSymbol].classList.add("hidden");
-    return;
-  }
-  this[prevElementSymbol].classList.remove("hidden");
-  this[nextElementSymbol].classList.remove("hidden");
-  this[thumbnailElementSymbol].classList.remove("hidden");
-
-  // Calculate the actual index in the 'slides' array (which includes clones)
-  let slidesIndex = index + visibleSlides;
-  this[configSymbol].currentIndex = index;
-
-  if (slidesIndex < 0) {
-    // We are at the "pre-cloned" slides, set index to the end
-    slidesIndex = totalSlides - 1 - visibleSlides;
-    this[configSymbol].currentIndex = totalOriginSlides - 1;
-  } else if (index > totalOriginSlides) {
-    // We are at the "post-cloned" slides, set index to the start
-    slidesIndex = 0;
-    this[configSymbol].currentIndex = 0;
-  }
-
-  setMoveProperties.call(this, slides, slidesIndex);
-
-  // Handle the "jump" back to the start/end for seamless looping
-  if (index === totalOriginSlides) {
-    setTimeout(() => {
-      getWindow().requestAnimationFrame(() => {
-        moveTo.call(this, 0, false); // Jump to first slide without animation
-      });
-    }, this.getOption("carousel.transition"));
-  } else if (index === -1) {
-    setTimeout(() => {
-      getWindow().requestAnimationFrame(() => {
-        moveTo.call(this, totalOriginSlides - 1, false); // Jump to last slide without animation
-      });
-    }, this.getOption("carousel.transition"));
-  }
-
-  fireCustomEvent(this, "monster-slider-moved", {
-    index: this[configSymbol].currentIndex, // Fire with the "real" index
-  });
+	const { slides, totalSlides, originSlides, totalOriginSlides } =
+		getSlidesAndTotal.call(this);
+
+	// Remove/add 'animate' class to enable/disable CSS transitions
+	if (animation === false) {
+		this[sliderElementSymbol].classList.remove("animate");
+	} else {
+		this[sliderElementSymbol].classList.add("animate");
+	}
+
+	// Handle carousel looping logic
+	if (this.getOption("features.carousel") === true) {
+		if (index < 0) {
+			index = -1; // Will trigger the "jump" to the end
+		}
+
+		if (index > totalOriginSlides) {
+			index = totalOriginSlides; // Will trigger the "jump" to the start
+		}
+	} else {
+		// Handle non-carousel boundary logic
+		if (index < 0) {
+			index = 0;
+		}
+
+		if (index >= totalOriginSlides) {
+			index = totalOriginSlides - 1;
+		}
+	}
+
+	if (!isInteger(index)) {
+		return;
+	}
+
+	const visibleSlides = getVisibleSlidesFromContainerWidth.call(this);
+
+	// Hide controls if all original slides are visible
+	if (totalOriginSlides <= visibleSlides) {
+		this[prevElementSymbol].classList.add("hidden");
+		this[nextElementSymbol].classList.add("hidden");
+		this[thumbnailElementSymbol].classList.add("hidden");
+		return;
+	}
+	this[prevElementSymbol].classList.remove("hidden");
+	this[nextElementSymbol].classList.remove("hidden");
+	this[thumbnailElementSymbol].classList.remove("hidden");
+
+	// Calculate the actual index in the 'slides' array (which includes clones)
+	let slidesIndex = index + visibleSlides;
+	this[configSymbol].currentIndex = index;
+
+	if (slidesIndex < 0) {
+		// We are at the "pre-cloned" slides, set index to the end
+		slidesIndex = totalSlides - 1 - visibleSlides;
+		this[configSymbol].currentIndex = totalOriginSlides - 1;
+	} else if (index > totalOriginSlides) {
+		// We are at the "post-cloned" slides, set index to the start
+		slidesIndex = 0;
+		this[configSymbol].currentIndex = 0;
+	}
+
+	setMoveProperties.call(this, slides, slidesIndex);
+
+	// Handle the "jump" back to the start/end for seamless looping
+	if (index === totalOriginSlides) {
+		setTimeout(() => {
+			getWindow().requestAnimationFrame(() => {
+				moveTo.call(this, 0, false); // Jump to first slide without animation
+			});
+		}, this.getOption("carousel.transition"));
+	} else if (index === -1) {
+		setTimeout(() => {
+			getWindow().requestAnimationFrame(() => {
+				moveTo.call(this, totalOriginSlides - 1, false); // Jump to last slide without animation
+			});
+		}, this.getOption("carousel.transition"));
+	}
+
+	fireCustomEvent(this, "monster-slider-moved", {
+		index: this[configSymbol].currentIndex, // Fire with the "real" index
+	});
 }
 
 /**
@@ -730,73 +730,73 @@ function moveTo(index, animation) {
  * @fires monster-slider-resized
  */
 function initEventHandler() {
-  const self = this;
-
-  const nextElements = this[nextElementSymbol];
-  if (nextElements) {
-    nextElements.addEventListener("click", () => {
-      self.next();
-    });
-  }
-
-  const prevElements = this[prevElementSymbol];
-  if (prevElements) {
-    prevElements.addEventListener("click", () => {
-      self.previous();
-    });
-  }
-
-  // Initialize drag-to-move event listeners
-  if (this.getOption("features.drag")) {
-    this[sliderElementSymbol].addEventListener("mousedown", (e) =>
-      startDragging.call(this, e, "mouse"),
-    );
-
-    this[sliderElementSymbol].addEventListener("touchstart", (e) =>
-      startDragging.call(this, e, "touch"),
-    );
-  }
-
-  const initialSize = {
-    width: this[sliderElementSymbol]?.offsetWidth || 0,
-    height: this[sliderElementSymbol]?.offsetHeight || 0,
-  };
-
-  // Observe slider size changes to update layout
-  const resizeObserver = new ResizeObserver((entries) => {
-    for (let entry of entries) {
-      const { width, height } = entry.contentRect;
-      if (width !== initialSize.width || height !== initialSize.height) {
-        self.stopAutoPlay();
-
-        // Re-init thumbnails if layout changes
-        if (this.getOption("features.thumbnails")) {
-          initThumbnails.call(this);
-        }
-
-        // Recalculate visible slides and update CSS property
-        const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
-        this[sliderElementSymbol].style.setProperty(
-          "--monster-slides-width",
-          `${100 / slidesVisible}%`,
-        );
-
-        // Move to start without animation
-        moveTo.call(self, 0, false);
-        self.startAutoPlay();
-
-        fireCustomEvent(self, "monster-slider-resized", {
-          width: width,
-          height: height,
-        });
-      }
-    }
-  });
-
-  resizeObserver.observe(this[sliderElementSymbol]);
-  this[configSymbol].resizeObserver = resizeObserver; // Store for cleanup
-
-  return this;
+	const self = this;
+
+	const nextElements = this[nextElementSymbol];
+	if (nextElements) {
+		nextElements.addEventListener("click", () => {
+			self.next();
+		});
+	}
+
+	const prevElements = this[prevElementSymbol];
+	if (prevElements) {
+		prevElements.addEventListener("click", () => {
+			self.previous();
+		});
+	}
+
+	// Initialize drag-to-move event listeners
+	if (this.getOption("features.drag")) {
+		this[sliderElementSymbol].addEventListener("mousedown", (e) =>
+			startDragging.call(this, e, "mouse"),
+		);
+
+		this[sliderElementSymbol].addEventListener("touchstart", (e) =>
+			startDragging.call(this, e, "touch"),
+		);
+	}
+
+	const initialSize = {
+		width: this[sliderElementSymbol]?.offsetWidth || 0,
+		height: this[sliderElementSymbol]?.offsetHeight || 0,
+	};
+
+	// Observe slider size changes to update layout
+	const resizeObserver = new ResizeObserver((entries) => {
+		for (let entry of entries) {
+			const { width, height } = entry.contentRect;
+			if (width !== initialSize.width || height !== initialSize.height) {
+				self.stopAutoPlay();
+
+				// Re-init thumbnails if layout changes
+				if (this.getOption("features.thumbnails")) {
+					initThumbnails.call(this);
+				}
+
+				// Recalculate visible slides and update CSS property
+				const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
+				this[sliderElementSymbol].style.setProperty(
+					"--monster-slides-width",
+					`${100 / slidesVisible}%`,
+				);
+
+				// Move to start without animation
+				moveTo.call(self, 0, false);
+				self.startAutoPlay();
+
+				fireCustomEvent(self, "monster-slider-resized", {
+					width: width,
+					height: height,
+				});
+			}
+		}
+	});
+
+	resizeObserver.observe(this[sliderElementSymbol]);
+	this[configSymbol].resizeObserver = resizeObserver; // Store for cleanup
+
+	return this;
 }
 
 /**
@@ -806,51 +806,51 @@ function initEventHandler() {
  * @param {string} type - The event type ("mouse" or "touch").
  */
 function startDragging(e, type) {
-  const { slides } = getSlidesAndTotal.call(this);
-
-  // Get the width of a single slide for calculating drag distance
-  const widthOfSlider = slides[this[configSymbol].currentIndex]?.offsetWidth;
-
-  // Set dragging state and initial position
-  this[configSymbol].isDragging = true;
-  this[configSymbol].startPos = getPositionX(e, type);
-  this[sliderElementSymbol].classList.add("grabbing");
-  // Disable transitions during drag for smooth movement
-  this[sliderElementSymbol].style.transitionProperty = "none";
-
-  const callbackMousemove = (x) => {
-    dragging.call(this, x, type);
-  };
-
-  const callbackMouseUp = () => {
-    const endEvent = type === "mouse" ? "mouseup" : "touchend";
-    const moveEvent = type === "mouse" ? "mousemove" : "touchmove";
-
-    // Clean up global event listeners
-    document.body.removeEventListener(endEvent, callbackMouseUp);
-    document.body.removeEventListener(moveEvent, callbackMousemove);
-
-    this[configSymbol].isDragging = false;
-    this[configSymbol].startPos = 0;
-    this[sliderElementSymbol].classList.remove("grabbing");
-    this[sliderElementSymbol].style.transitionProperty = ""; // Re-enable transitions
-
-    const lastPos = this[configSymbol].draggingPos;
-    this[configSymbol].draggingPos = 0;
-
-    // Calculate how many slides were "swiped" and move to the new index
-    let newIndex = this[configSymbol].currentIndex;
-    const shift = lastPos / widthOfSlider;
-    const shiftIndex = Math.round(shift);
-
-    newIndex += shiftIndex * -1;
-    this.moveTo(newIndex);
-  };
-
-  document.body.addEventListener("mouseup", callbackMouseUp);
-  document.body.addEventListener("mousemove", callbackMousemove);
-  document.body.addEventListener("touchend", callbackMouseUp);
-  document.body.addEventListener("touchmove", callbackMousemove);
+	const { slides } = getSlidesAndTotal.call(this);
+
+	// Get the width of a single slide for calculating drag distance
+	const widthOfSlider = slides[this[configSymbol].currentIndex]?.offsetWidth;
+
+	// Set dragging state and initial position
+	this[configSymbol].isDragging = true;
+	this[configSymbol].startPos = getPositionX(e, type);
+	this[sliderElementSymbol].classList.add("grabbing");
+	// Disable transitions during drag for smooth movement
+	this[sliderElementSymbol].style.transitionProperty = "none";
+
+	const callbackMousemove = (x) => {
+		dragging.call(this, x, type);
+	};
+
+	const callbackMouseUp = () => {
+		const endEvent = type === "mouse" ? "mouseup" : "touchend";
+		const moveEvent = type === "mouse" ? "mousemove" : "touchmove";
+
+		// Clean up global event listeners
+		document.body.removeEventListener(endEvent, callbackMouseUp);
+		document.body.removeEventListener(moveEvent, callbackMousemove);
+
+		this[configSymbol].isDragging = false;
+		this[configSymbol].startPos = 0;
+		this[sliderElementSymbol].classList.remove("grabbing");
+		this[sliderElementSymbol].style.transitionProperty = ""; // Re-enable transitions
+
+		const lastPos = this[configSymbol].draggingPos;
+		this[configSymbol].draggingPos = 0;
+
+		// Calculate how many slides were "swiped" and move to the new index
+		let newIndex = this[configSymbol].currentIndex;
+		const shift = lastPos / widthOfSlider;
+		const shiftIndex = Math.round(shift);
+
+		newIndex += shiftIndex * -1;
+		this.moveTo(newIndex);
+	};
+
+	document.body.addEventListener("mouseup", callbackMouseUp);
+	document.body.addEventListener("mousemove", callbackMousemove);
+	document.body.addEventListener("touchend", callbackMouseUp);
+	document.body.addEventListener("touchmove", callbackMousemove);
 }
 
 /**
@@ -861,7 +861,7 @@ function startDragging(e, type) {
  * @return {number} The clientX position.
  */
 function getPositionX(e, type) {
-  return type === "mouse" ? e.pageX : e.touches[0].clientX;
+	return type === "mouse" ? e.pageX : e.touches[0].clientX;
 }
 
 /**
@@ -871,13 +871,13 @@ function getPositionX(e, type) {
  * @param {string} type - The event type ("mouse" or "touch").
  */
 function dragging(e, type) {
-  if (!this[configSymbol].isDragging) return;
-  this[configSymbol].draggingPos =
-    getPositionX(e, type) - this[configSymbol].startPos;
+	if (!this[configSymbol].isDragging) return;
+	this[configSymbol].draggingPos =
+		getPositionX(e, type) - this[configSymbol].startPos;
 
-  // Update position based on drag delta
-  this[sliderElementSymbol].style.transform =
-    `translateX(calc(${this[configSymbol].lastOffset} + ${this[configSymbol].draggingPos}px))`;
+	// Update position based on drag delta
+	this[sliderElementSymbol].style.transform =
+		`translateX(calc(${this[configSymbol].lastOffset} + ${this[configSymbol].draggingPos}px))`;
 }
 
 /**
@@ -886,25 +886,25 @@ function dragging(e, type) {
  * @return {void}
  */
 function initControlReferences() {
-  this[controlElementSymbol] = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="control"]`,
-  );
+	this[controlElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="control"]`,
+	);
 
-  this[sliderElementSymbol] = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="slider"]`,
-  );
+	this[sliderElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="slider"]`,
+	);
 
-  this[prevElementSymbol] = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="prev"]`,
-  );
+	this[prevElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="prev"]`,
+	);
 
-  this[nextElementSymbol] = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="next"]`,
-  );
+	this[nextElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="next"]`,
+	);
 
-  this[thumbnailElementSymbol] = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="thumbnails"]`,
-  );
+	this[thumbnailElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="thumbnails"]`,
+	);
 }
 
 /**
@@ -913,8 +913,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-  // language=HTML
-  return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <div class="prev" data-monster-role="prev" part="prev">
                 <slot name="prev"></slot>