@schukai/monster 3.99.2 → 3.99.4

package/source/components/layout/slider.mjs

@@ -10,19 +10,21 @@
  * For more information about purchasing a commercial license, please contact schukai GmbH.
  */
 
-import { instanceSymbol } from "../../constants.mjs";
-import { ATTRIBUTE_PREFIX, ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
-import { CustomElement, getSlottedElements } from "../../dom/customelement.mjs";
+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";
+import {SliderStyleSheet} from "./stylesheet/slider.mjs";
+import {fireCustomEvent} from "../../dom/events.mjs";
 
-import { getWindow } from "../../dom/util.mjs";
+import {getWindow} from "../../dom/util.mjs";
+import {isObject, isInteger} from "../../types/is.mjs";
 
-export { Slider };
+
+export {Slider};
 
 /**
  * @private
@@ -54,165 +56,177 @@ const nextElementSymbol = Symbol("nextElement");
  */
 const configSymbol = Symbol("config");
 
-/**
- * @private
- * @type {string}
- */
-const ATTRIBUTE_CLONE_FROM = ATTRIBUTE_PREFIX + "clone-from";
-
 /**
  * A Slider
  *
  * @fragments /fragments/components/layout/slider/
  *
  * @example /examples/components/layout/slider-simple
+ * @example /examples/components/layout/slider-carousel
+ * @example /examples/components/layout/slider-multiple
  *
  * @since 3.74.0
  * @copyright schukai GmbH
  * @summary A beautiful Slider that can make your life easier and also looks good.
  */
 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,
-		};
-
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-		initStructure.call(this);
-
-		return this;
-	}
-
-	/**
-	 * 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 {string} actions.click="throw Error" Callback when clicked
-	 * @property {Object} features Features
-	 * @property {boolean} features.carousel=true Carousel feature
-	 * @property {boolean} features.autoPlay=true Auto play feature
-	 * @property {boolean} features.thumbnails=true Thumbnails feature
-	 * @property {boolean} features.drag=true Drag feature
-	 * @property {Object} autoPlay Auto play configuration
-	 * @property {number} autoPlay.delay=1500 Delay between slides
-	 * @property {number} autoPlay.startDelay=1000 Start delay
-	 * @property {string} autoPlay.direction="next" Direction of the autoplay
-	 * @property {boolean} autoPlay.mouseOverPause=true Pause on mouse over
-	 * @property {boolean} autoPlay.touchPause=true Pause on touch
-	 * @property {Object} classes CSS classes
-	 * @property {boolean} disabled=false Disabled state
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			classes: {},
-			disabled: false,
-
-			features: {
-				carousel: true,
-				autoPlay: true,
-				thumbnails: true,
-				drag: true,
-			},
-
-			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 index
-	 * @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);
-		}
-	}
-
-	/**
-	 * 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,
+        };
+
+        // set --monster-slides-width
+        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;
+    }
+
+    /**
+     * 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 {string} actions.click Callback when clicked
+     * @property {Object} features Features
+     * @property {boolean} features.carousel Carousel feature
+     * @property {boolean} features.autoPlay Auto play feature
+     * @property {boolean} features.thumbnails Thumbnails feature
+     * @property {boolean} features.drag Drag feature
+     * @property {Object} slides Slides configuration, an object with breakpoints and the number of slides to show
+     * @property {Object} carousel Carousel configuration
+     * @property {number} carousel.transition Transition time between a full rotation of the carousel
+     * @property {Object} autoPlay Auto play configuration
+     * @property {number} autoPlay.delay Delay between slides
+     * @property {number} autoPlay.startDelay Start delay
+     * @property {string} autoPlay.direction Direction of the autoplay
+     * @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,
+            },
+
+            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 index
+     * @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);
+        }
+    }
+
+    /**
+     * starts the auto play
+     *
+     * @return {void}
+     */
+    startAutoPlay() {
+        initAutoPlay.call(this);
+    }
 }
 
 /**
@@ -220,148 +234,185 @@ class Slider extends CustomElement {
  * @param name
  */
 function initNavigation(name) {
-	const element = this.shadowRoot.querySelector("." + name + "");
-	const elementHeight = element.offsetHeight;
-	element.style.top = `calc(50% - ${elementHeight / 2}px)`;
+    const element = this.shadowRoot.querySelector("." + name + "");
+    const elementHeight = element.offsetHeight;
+    element.style.top = `calc(50% - ${elementHeight / 2}px)`;
 }
 
 /**
  * @private
  */
 function initStructure() {
-	initNavigation.call(this, "next");
-	initNavigation.call(this, "prev");
 
-	if (this.getOption("features.thumbnails")) {
-		initThumbnails.call(this);
-	}
+    initNavigation.call(this, "next");
+    initNavigation.call(this, "prev");
 
-	if (this.getOption("features.carousel")) {
-		initCarousel.call(this);
-	}
+    if (this.getOption("features.thumbnails")) {
+        initThumbnails.call(this);
+    }
 
-	if (this.getOption("features.autoPlay")) {
-		initAutoPlay.call(this);
-	}
+    initShadows.call(this);
+
+    if (this.getOption("features.autoPlay")) {
+        initAutoPlay.call(this);
+    }
 }
 
 /**
  * @private
  */
 function initThumbnails() {
-	const self = this;
-	const thumbnails = this.shadowRoot.querySelector(
-		"[data-monster-role='thumbnails']",
-	);
-	const slides = Array.from(getSlottedElements.call(this, ":scope", null));
-
-	slides.forEach((slide, index) => {
-		const thumbnail = document.createElement("div");
-		thumbnail.classList.add("thumbnail");
-		thumbnail.addEventListener("click", () => {
-			if (self.getOption("features.carousel")) {
-				this.moveTo(index + 1);
-			} else {
-				this.moveTo(index);
-			}
-		});
-
-		thumbnails.appendChild(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']",
+    );
+
+    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);
+    });
+
+    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");
+    });
 }
 
 /**
  * @private
  */
 function initAutoPlay() {
-	const self = this;
-	const autoPlay = this.getOption("autoPlay");
-	const delay = autoPlay.delay;
-	const startDelay = autoPlay.startDelay;
-	const direction = autoPlay.direction;
-
-	function start() {
-		if (self[configSymbol].autoPlayInterval) {
-			clearInterval(self[configSymbol].autoPlayInterval);
-		}
-
-		self[configSymbol].autoPlayInterval = setInterval(() => {
-			if (direction === "next") {
-				if (self.next() === -1) {
-					if (self.getOption("features.carousel")) {
-						clearInterval(self[configSymbol].autoPlayInterval);
-					}
-				}
-			} else {
-				if (self.previous() === -1) {
-					if (self.getOption("features.carousel")) {
-						clearInterval(self[configSymbol].autoPlayInterval);
-					}
-				}
-			}
-		}, delay);
-	}
-
-	setTimeout(() => {
-		start();
-	}, startDelay);
-
-	if (autoPlay.mouseOverPause) {
-		this.addEventListener("mouseover", () => {
-			clearInterval(this[configSymbol].autoPlayInterval);
-		});
-
-		this.addEventListener("mouseout", () => {
-			if (this[configSymbol].isDragging) {
-				return;
-			}
-			start();
-		});
-	}
-
-	if (autoPlay.touchPause) {
-		this.addEventListener("touchstart", () => {
-			clearInterval(this[configSymbol].autoPlayInterval);
-		});
-
-		this.addEventListener("touchend", () => {
-			start();
-		});
-	}
+    const self = this;
+    const autoPlay = this.getOption("autoPlay");
+    const delay = autoPlay.delay;
+    const startDelay = autoPlay.startDelay;
+    const direction = autoPlay.direction;
+
+    function start() {
+        if (self[configSymbol].autoPlayInterval) {
+            clearInterval(self[configSymbol].autoPlayInterval);
+        }
+
+        self[configSymbol].autoPlayInterval = setInterval(() => {
+
+            const {totalOriginSlides} = getSlidesAndTotal.call(self);
+
+            if (direction === "next") {
+                if (!self.getOption("features.carousel")&& self[configSymbol].currentIndex >= totalOriginSlides - 1) {
+                    self[configSymbol].currentIndex = -1;
+                }
+                self.next();
+            } else {
+                if (!self.getOption("features.carousel") && self[configSymbol].currentIndex <= 0) {
+                    self[configSymbol].currentIndex = totalOriginSlides;
+                }
+                self.previous();
+            }
+        }, delay);
+    }
+
+    setTimeout(() => {
+        start();
+    }, startDelay);
+
+    if (autoPlay.mouseOverPause) {
+        this.addEventListener("mouseover", () => {
+            clearInterval(this[configSymbol].autoPlayInterval);
+        });
+
+        this.addEventListener("mouseout", () => {
+            if (this[configSymbol].isDragging) {
+                return;
+            }
+            start();
+        });
+    }
+
+    if (autoPlay.touchPause) {
+        this.addEventListener("touchstart", () => {
+            clearInterval(this[configSymbol].autoPlayInterval);
+        });
+
+        this.addEventListener("touchend", () => {
+            start();
+        });
+    }
 }
 
-/**
- * @private
- */
-function initCarousel() {
-	const { slides, totalSlides } = getSlidesAndTotal.call(this);
-	if (this.getOption("features.carousel") && totalSlides > 2) {
-		const firstElement = slides[0].cloneNode(true);
-		firstElement.setAttribute(ATTRIBUTE_CLONE_FROM, 1);
+function getVisibleSlidesFromContainerWidth() {
+
+    const containerWidth = this.shadowRoot.querySelector(`[${ATTRIBUTE_ROLE}="slider"]`).offsetWidth;
+    const slides = this.getOption("slides");
+    let visibleSlides = 1;
+
+    if (!isObject(slides)) {
+        return visibleSlides;
+    }
 
-		const lastElement = slides[totalSlides - 1].cloneNode(true);
-		lastElement.setAttribute(ATTRIBUTE_CLONE_FROM, totalSlides);
-		slides[totalSlides - 1].insertAdjacentElement("afterend", firstElement);
+    for (const key in slides) {
+        if (containerWidth >= key) {
+            visibleSlides = slides[key];
+        }
+    }
 
-		slides[0].insertAdjacentElement("beforebegin", lastElement);
+    const {originSlides} = getSlidesAndTotal.call(this);
+    if (visibleSlides > originSlides.length) {
+        visibleSlides = originSlides.length - 1;
+    }
 
-		moveTo.call(this, 1);
-	}
+
+    return visibleSlides;
+}
+
+/**
+ * @private
+ */
+function initShadows() {
+    const {slides, totalSlides} = getSlidesAndTotal.call(this);
+    const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
+
+    if (totalSlides > slidesVisible) {
+
+        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;
+        }
+
+        current = slides[totalSlides - 1];
+        let first = slides[0];
+        for (let i = 0; i < slidesVisible; i++) {
+            const clone = current.cloneNode(true);
+            clone.setAttribute('data-monster-clone-from', totalSlides - i);
+            first.insertAdjacentElement('beforebegin', clone);
+            current = current.previousElementSibling;
+            first = clone;
+        }
+
+        moveTo.call(this, 0);
+
+    }
 }
 
 /**
@@ -369,9 +420,13 @@ function initCarousel() {
  * @return {{slides: unknown[], totalSlides: number}}
  */
 function getSlidesAndTotal() {
-	const slides = Array.from(getSlottedElements.call(this, ":scope", null));
-	const totalSlides = slides.length;
-	return { slides, totalSlides };
+    const originSlides = Array.from(getSlottedElements.call(this, ":scope:not([data-monster-clone-from])", null));
+    const totalOriginSlides = originSlides.length;
+
+    const slides = Array.from(getSlottedElements.call(this, ":scope", null));
+    const totalSlides = slides.length;
+
+    return {originSlides, totalOriginSlides, slides, totalSlides};
 }
 
 /**
@@ -379,22 +434,17 @@ function getSlidesAndTotal() {
  * @return {number}
  */
 function next() {
-	const { slides, totalSlides } = getSlidesAndTotal.call(this);
-	const nextIndex = this[configSymbol].currentIndex + 1;
-
-	if (nextIndex >= totalSlides) {
-		return -1;
-	}
-
-	queueMicrotask(() => {
-		getWindow().requestAnimationFrame(() => {
-			getWindow().requestAnimationFrame(() => {
-				moveTo.call(this, nextIndex);
-			});
-		});
-	});
-
-	return 0;
+    const nextIndex = this[configSymbol].currentIndex + 1;
+
+    queueMicrotask(() => {
+        getWindow().requestAnimationFrame(() => {
+            getWindow().requestAnimationFrame(() => {
+                moveTo.call(this, nextIndex);
+            });
+        });
+    });
+
+    return 0;
 }
 
 /**
@@ -402,14 +452,17 @@ function next() {
  * @return {number}
  */
 function prev() {
-	const prevIndex = this[configSymbol].currentIndex - 1;
+    const prevIndex = this[configSymbol].currentIndex - 1;
 
-	if (prevIndex < 0) {
-		return -1;
-	}
+    queueMicrotask(() => {
+        getWindow().requestAnimationFrame(() => {
+            getWindow().requestAnimationFrame(() => {
+                moveTo.call(this, prevIndex);
+            });
+        });
+    });
 
-	moveTo.call(this, prevIndex);
-	return 0;
+    return 0;
 }
 
 /**
@@ -418,83 +471,98 @@ function prev() {
  * @param index
  */
 function setMoveProperties(slides, index) {
-	this[configSymbol].currentIndex = index;
+    slides.forEach((slide) => {
+        slide.classList.remove("current");
+    });
+
+    let offset = -(index * 100);
+    const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
+
+    offset = offset / slidesVisible;
 
-	slides.forEach((slide) => {
-		slide.classList.remove("current");
-	});
+    if (offset !== 0) {
+        offset += "%";
+    }
 
-	let offset = -(index * 100);
-	if (offset !== 0) {
-		offset += "%";
-	}
+    this[sliderElementSymbol].style.transform =
+        `translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
+
+    slides[index].classList.add("current");
+    this[configSymbol].lastOffset = offset;
 
-	this[sliderElementSymbol].style.transform =
-		`translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
-	slides[index].classList.add("current");
 }
 
 /**
  * @private
- * @param index
+ * @param {number} index
+ * @param {boolean} animation
  * @fires monster-slider-moved
  */
-function moveTo(index) {
-	const { slides, totalSlides } = getSlidesAndTotal.call(this);
-
-	if (index < 0) {
-		index = totalSlides - 1;
-	} else if (index >= totalSlides) {
-		index = 0;
-	}
-
-	const slider = this[sliderElementSymbol];
-
-	setMoveProperties.call(this, slides, index);
-
-	const style = getComputedStyle(this[sliderElementSymbol]);
-	const duration = style.transitionDuration;
-	const durationMilis = parseFloat(duration) * 1000;
-
-	let slideIndex = index;
-	let eventFired = false;
-
-	if (this.getOption("features.carousel")) {
-		slideIndex = index - 1;
-
-		if (slides[index].hasAttribute(ATTRIBUTE_CLONE_FROM)) {
-			const from = parseInt(slides[index].getAttribute(ATTRIBUTE_CLONE_FROM));
-
-			getWindow().requestAnimationFrame(() => {
-				getWindow().requestAnimationFrame(() => {
-					setTimeout(() => {
-						slider.style.transitionProperty = "none";
-
-						setMoveProperties.call(this, slides, from);
-						slideIndex = from - 1;
-
-						getWindow().requestAnimationFrame(() => {
-							getWindow().requestAnimationFrame(() => {
-								slider.style.transitionProperty = "";
-
-								fireCustomEvent(this, "monster-slider-moved", {
-									index: slideIndex,
-								});
-
-								eventFired = true;
-							});
-						});
-					}, durationMilis);
-				});
-			});
-		}
-	}
-
-	if (!eventFired) {
-		fireCustomEvent(this, "monster-slider-moved", {
-			index: slideIndex,
-		});
-	}
+function moveTo(index, animation) {
+
+    const {slides, totalSlides, originSlides, totalOriginSlides} = getSlidesAndTotal.call(this);
+
+    if (animation === false) {
+        this[sliderElementSymbol].classList.remove("animate");
+    } else {
+        this[sliderElementSymbol].classList.add("animate");
+    }
+
+    if (this.getOption("features.carousel") === true) {
+
+        if (index < 0) {
+            index = -1;
+        }
+
+        if (index > totalOriginSlides) {
+            index = totalOriginSlides;
+        }
+
+    } else {
+
+        if (index < 0) {
+            index = 0;
+        }
+
+        if (index >= totalOriginSlides) {
+            index = totalOriginSlides - 1;
+        }
+    }
+
+    if (!isInteger(index)) {
+        return;
+    }
+
+    this[configSymbol].currentIndex = index;
+    let slidesIndex = index + getVisibleSlidesFromContainerWidth.call(this);
+
+    if (slidesIndex < 0) {
+        slidesIndex = totalSlides - 1 - getVisibleSlidesFromContainerWidth.call(this);
+        this[configSymbol].currentIndex = totalOriginSlides - 1;
+    } else if (index > totalOriginSlides) {
+        slidesIndex = 0;
+        this[configSymbol].currentIndex = 0;
+    }
+
+    setMoveProperties.call(this, slides, slidesIndex);
+
+    if (index === totalOriginSlides) {
+        setTimeout(() => {
+            getWindow().requestAnimationFrame(() => {
+                moveTo.call(this, 0, false);
+            });
+        }, this.getOption("carousel.transition"));
+    } else if (index === -1) {
+        setTimeout(() => {
+            getWindow().requestAnimationFrame(() => {
+                moveTo.call(this, totalOriginSlides - 1, false);
+            });
+        }, this.getOption("carousel.transition"));
+    }
+
+    fireCustomEvent(this, "monster-slider-moved", {
+        index: index,
+    });
 }
 
 /**
@@ -502,35 +570,35 @@ function moveTo(index) {
  * @return {initEventHandler}
  */
 function initEventHandler() {
-	const self = this;
+    const self = this;
 
-	const nextElements = this[nextElementSymbol];
+    const nextElements = this[nextElementSymbol];
 
-	if (nextElements) {
-		nextElements.addEventListener("click", () => {
-			self.next();
-		});
-	}
+    if (nextElements) {
+        nextElements.addEventListener("click", () => {
+            self.next();
+        });
+    }
 
-	const prevElements = this[prevElementSymbol];
+    const prevElements = this[prevElementSymbol];
 
-	if (prevElements) {
-		prevElements.addEventListener("click", () => {
-			self.previous();
-		});
-	}
+    if (prevElements) {
+        prevElements.addEventListener("click", () => {
+            self.previous();
+        });
+    }
 
-	if (this.getOption("features.drag")) {
-		this[sliderElementSymbol].addEventListener("mousedown", (e) =>
-			startDragging.call(this, e, "mouse"),
-		);
+    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"),
-		);
-	}
+        this[sliderElementSymbol].addEventListener("touchstart", (e) =>
+            startDragging.call(this, e, "touch"),
+        );
+    }
 
-	return this;
+    return this;
 }
 
 /**
@@ -539,45 +607,45 @@ function initEventHandler() {
  * @param type
  */
 function startDragging(e, type) {
-	this[configSymbol].isDragging = true;
-	this[configSymbol].startPos = getPositionX(e, type);
-	this[sliderElementSymbol].classList.add("grabbing");
-	this[sliderElementSymbol].style.transitionProperty = "none";
 
-	const callbackMousemove = (x) => {
-		dragging.call(this, x, type);
-	};
+    const {slides} = getSlidesAndTotal.call(this);
 
-	const callbackMouseUp = () => {
-		const endEvent = type === "mouse" ? "mouseup" : "touchend";
-		const moveEvent = type === "mouse" ? "mousemove" : "touchmove";
+    const widthOfSlider = slides[this[configSymbol].currentIndex]?.offsetWidth
 
-		document.body.removeEventListener(endEvent, callbackMouseUp);
-		document.body.removeEventListener(moveEvent, callbackMousemove);
+    this[configSymbol].isDragging = true;
+    this[configSymbol].startPos = getPositionX(e, type);
+    this[sliderElementSymbol].classList.add("grabbing");
+    this[sliderElementSymbol].style.transitionProperty = "none";
 
-		this[configSymbol].isDragging = false;
-		this[configSymbol].startPos = 0;
-		this[sliderElementSymbol].classList.remove("grabbing");
-		this[sliderElementSymbol].style.transitionProperty = "";
+    const callbackMousemove = (x) => {
+        dragging.call(this, x, type);
+    };
 
-		const lastPos = this[configSymbol].draggingPos;
-		const widthOfSlider = this[sliderElementSymbol].offsetWidth;
-		this[configSymbol].draggingPos = 0;
+    const callbackMouseUp = () => {
+        const endEvent = type === "mouse" ? "mouseup" : "touchend";
+        const moveEvent = type === "mouse" ? "mousemove" : "touchmove";
 
-		let newIndex = this[configSymbol].currentIndex;
+        document.body.removeEventListener(endEvent, callbackMouseUp);
+        document.body.removeEventListener(moveEvent, callbackMousemove);
 
-		const x = lastPos / widthOfSlider;
-		if (x > 0.5) {
-			newIndex--;
-		} else if (x < -0.5) {
-			newIndex++;
-		}
+        this[configSymbol].isDragging = false;
+        this[configSymbol].startPos = 0;
+        this[sliderElementSymbol].classList.remove("grabbing");
+        this[sliderElementSymbol].style.transitionProperty = "";
 
-		this.moveTo(newIndex);
-	};
+        const lastPos = this[configSymbol].draggingPos;
+        this[configSymbol].draggingPos = 0;
 
-	document.body.addEventListener("mouseup", callbackMouseUp);
-	document.body.addEventListener("mousemove", callbackMousemove);
+        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);
 }
 
 /**
@@ -587,7 +655,7 @@ function startDragging(e, type) {
  * @return {*|number|number}
  */
 function getPositionX(e, type) {
-	return type === "mouse" ? e.pageX : e.touches[0].clientX;
+    return type === "mouse" ? e.pageX : e.touches[0].clientX;
 }
 
 /**
@@ -596,11 +664,13 @@ function getPositionX(e, type) {
  * @param type
  */
 function dragging(e, type) {
-	if (!this[configSymbol].isDragging) return;
-	this[configSymbol].draggingPos =
-		getPositionX(e, type) - this[configSymbol].startPos;
-	const { slides, totalSlides } = getSlidesAndTotal.call(this);
-	setMoveProperties.call(this, slides, this[configSymbol].currentIndex);
+    if (!this[configSymbol].isDragging) return;
+    this[configSymbol].draggingPos =
+        getPositionX(e, type) - this[configSymbol].startPos;
+
+    this[sliderElementSymbol].style.transform =
+        `translateX(calc(${this[configSymbol].lastOffset} + ${this[configSymbol].draggingPos}px))`;
+
 }
 
 /**
@@ -608,21 +678,21 @@ 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"]`,
+    );
 }
 
 /**
@@ -630,8 +700,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" part="prev">
                 <slot name="prev"></slot>