Gecko [ thecigaretteboxes.com ]

Name	Size	Permission
own-carousel.css	349 B	-rw-r--r--
own-carousel.js	10.92 KB	-rw-r--r--
own-carousel.min.css	264 B	-rw-r--r--
own-carousel.min.js	5.19 KB	-rw-r--r--

Code Editor : own-carousel.js

Object.prototype.ownCarousel = function (options) {
    const {
        itemPerRow = 4,
        itemWidth = 24,
        loop = true,
        responsive = {},
        draggable = true,
        mouseWheel = false,
        autoplay = 0,
        stopAutoplayWhenHover = true,
        nav = false,
    } = options;
    //extract arguments
    this.carousel = this.querySelector(".own-carousel");
    this.carouselOuter = this.querySelector(".own-carousel__outer");
    this.itemWidthBig = this.itemWidth = itemWidth;
    this.itemPerRowBig = this.itemPerRow = itemPerRow;
    this.responsive = responsive;
    this.gapWidth = (100 - itemPerRow * itemWidth) / (itemPerRow - 1) || 0; // prevent divide 0
    this.style.setProperty("--width", `${itemWidth}%`);
    this.style.setProperty("--margin", `${this.gapWidth}%`);
    this.index = 0;
    this.carouselItem = this.carousel.children;
    this.imgWidth = this.carouselItem[0].getBoundingClientRect().width;
    this.numberOfItem = this.carouselItem.length;
    this.step =
        this.imgWidth + (this.gapWidth / this.itemWidth) * this.imgWidth; //calculate the step to translate

if (loop) {
        //if loop is true, clone carousel item
        this.index = itemPerRow;
        this.carousel.style.transform = `translate3d(${
            -this.index * this.step
        }px,0,0)`;
        for (let i = 0; i < this.itemPerRow; i++) {
            let cloneNode = this.carouselItem[i].cloneNode(true);
            this.carousel.insertAdjacentElement("beforeend", cloneNode);
        }
        let count = 0;
        while (count != this.itemPerRow) {
            let cloneNode = this.carouselItem[this.numberOfItem - 1].cloneNode(
                true
            );
            this.carousel.insertAdjacentElement("afterbegin", cloneNode);
            count++;
        }
    }

this.translateSlide = () => {
        this.carousel.style.transform = `translate3d(${
            -this.index * this.step
        }px,0,0)`;
        //just a function used many time, to translate slide
    };

this.resetSlide = (step) => {
        //reset slide, to make it loop
        if (this.index + step < 1) this.index = this.numberOfItem + 1;
        if (this.index + step >= this.numberOfItem + this.itemPerRow)
            this.index = this.itemPerRow - 1;
        this.carousel.style.transition = "none";
        this.translateSlide();
        //reset it silently by changing transition to none
        //then move it, i had delay 20ms because if we change inline style transition too fast, it will not work properly
        setTimeout(() => {
            this.carousel.style.transition = "all 0.25s";
            this.index += step;
            this.translateSlide();
        }, 20);
    };

this.moveSlide = (step) => {
        this.carousel.style.transition = "all 0.25s";
        //every time we move slide, add transition
        if (loop) {
            if (
                this.index + step < 1 ||
                this.index + step >= this.numberOfItem + this.itemPerRow
            ) {
                this.resetSlide(step);
            } else {
                this.index += step;
                this.translateSlide();
            }
        } else {
            if (
                this.index + step < 0 ||
                this.index + step > this.numberOfItem - this.itemPerRow
            )
                return;
            else {
                this.index += step;
                this.translateSlide();
            }
        }
    };

if (nav) {
        this.querySelector(".control__prev").addEventListener("click", () => {
            this.moveSlide(-1);
        });
        this.querySelector(".control__next").addEventListener("click", () => {
            this.moveSlide(1);
        });
    }

if (draggable) {
        //if draggable is true, add draggable-support event, variables,...
        let firstPos = (currentPos = 0);

let dragHandle = (e) => {
            let currentMove = parseFloat(
                this.carousel.style.transform.slice(12)
            ); //get the x-axis of transform3d
            let currentIndex = -currentMove / this.step;

this.checkIndex = (currentMove) => {
            let temp = currentMove;
            while (temp >= this.step) {
                temp -= this.step;
            }
            if (
                (temp > 50 && firstPos - currentPos >= 0) ||
                (this.step - temp < 50 && firstPos - currentPos <= 0)
            )
                return Math.ceil(currentMove / this.step);
            return Math.floor(currentMove / this.step);
        }; // this function is used to check current index to determine move next or previous

this.carouselOuter.addEventListener("mousedown", dragStartHandle);
        this.carouselOuter.addEventListener("touchstart", dragStartHandle);
        // i had to create carouselOuter because carousel will be hidden when slide is working
    }

if (mouseWheel) {
        this.carouselOuter.addEventListener("wheel", (e) => {
            e.preventDefault();
            if (e.deltaY > 0) this.moveSlide(-1);
            else this.moveSlide(1);
        });
    }

let intervalId;
    let timeoutId;

if (autoplay) {
        timeoutId = setTimeout(() => {
            intervalId = setInterval(this.moveSlide, autoplay, 1);
        }, 3000);
        if (stopAutoplayWhenHover) {
            this.carouselOuter.addEventListener("mouseenter", () => {
                clearTimeout(timeoutId);
                clearInterval(intervalId);
            });
            this.carouselOuter.addEventListener("mouseleave", () => {
                clearInterval(intervalId);
                clearTimeout(timeoutId);
                timeoutId = setTimeout(() => {
                    intervalId = setInterval(this.moveSlide, autoplay, 1);
                }, 2000);
            });
        }
    }
};

window.addEventListener("resize", debounce(responsive, 500));
//reduce the number of execution for performance

${this.title}

Code Editor : own-carousel.js