https://www.pcmag.com/js/alpine/sliding-div-carousel.js

1window.slidingDivCarousel = function () {
2    return {
3        arrowsVisible: true,
4        windowWidth: window.innerWidth,
5        currentPageIndex: 0,
6        nextSlideIndex: 0,
7        touchBegin: 0,
8        touchFinish: 0,
9        reviews: [],
10        scrollLeft: 0,
11        hasSwiped: false,
12        defaultWidth: 264,
13        mountSlides: function () {
14            if (!this.$refs.slider) return;
15
16            let slides = this.$refs.slider.querySelectorAll('.slide:not(.md\\:hidden)');
17
18            for (let i = 0; i < slides.length; i++) {
19                this.reviews.push(slides[i].innerHTML)
20            }
21        },
22        setPage: function (event) {
23            return this.scrollLeft = event.target.scrollLeft
24        },
25        nextPage: function () {
26            if (!this.$refs.slider) return;
27
28            let slide = this.$refs.slider.querySelector('.slide:nth-child(2)') ? this.$refs.slider.querySelector('.slide:nth-child(2)') : this.$refs.slider.querySelector('.slide');
29            if (!slide) return;
30
31            this.scrollLeft = parseInt(this.scrollLeft) + (slide.getBoundingClientRect().width * 2);
32            if (this.scrollLeft >= this.defaultWidth * this.reviews.length - (slide.getBoundingClientRect().width * 2)) {
33                this.scrollLeft = this.defaultWidth * this.reviews.length - (slide.getBoundingClientRect().width * 2);
34            }
35            const sliderElement = this.$refs.slider.querySelector('.slider');
36            if (sliderElement) {
37                sliderElement.scrollTo({ left: this.scrollLeft, behavior: 'smooth' });
38            }
39        },
40        previousPage: function () {
41            if (!this.$refs.slider) return;
42
43            let slide = this.$refs.slider.querySelector('.slide:nth-child(2)') ? this.$refs.slider.querySelector('.slide:nth-child(2)') : this.$refs.slider.querySelector('.slide');
44            if (!slide) return;
45
46            this.scrollLeft = parseInt(this.scrollLeft) - (slide.getBoundingClientRect().width * 2);
47            if (this.scrollLeft < 0) {
48                this.scrollLeft = 0;
49            }
50            const sliderElement = this.$refs.slider.querySelector('.slider');
51            if (sliderElement) {
52                sliderElement.scrollTo({ left: this.scrollLeft, behavior: 'smooth' });
53            }
54        },
55        onWindowResize: window.debounce(function () {
56            this.windowWidth = window.innerWidth
57        }, 100),
58        touchStart: function (event) {
59            this.touchBegin = event.changedTouches[0].clientX;
60        },
61        touchEnd: function (event) {
62            this.touchFinish = event.changedTouches[0].clientX;
63            this.swipeHandler(this.touchFinish - this.touchBegin);
64        },
65        swipeHandler: function (direction) {
66            if (Math.abs(direction) > 20 && gtag) {
67                let directionSwiped = (direction > 0) ? 'right' : 'left';
68                gtag('event', 'module_clicks', {
69                    module: 'sliding-carousel',
70                    action: 'swipe',
71                    element_label: 'swiped-' + directionSwiped,
72                    'non_interaction': false,
73                });
74            }
75        },
76        showPrevious: function () {
77            return this.scrollLeft > 25;
78        },
79        showNext: function () {
80            return this.scrollLeft - 15 < this.defaultWidth * this.reviews.length - (this.$refs.slider ? this.$refs.slider.getBoundingClientRect().width : 0);
81        },
82        init: function () {
83            this.$nextTick(() => {
84                if (!this.$refs.slider) return;
85
86                this.mountSlides();
87                let slide = this.$refs.slider.querySelector('.slide:nth-child(2)') ? this.$refs.slider.querySelector('.slide:nth-child(2)') : this.$refs.slider.querySelector('.slide');
88                setTimeout(() => {
89                    if (slide) {
90                        this.defaultWidth = slide.getBoundingClientRect().width;
91                    }
92                }, 1000);
93                const sliderElement = this.$refs.slider.querySelector('.slider');
94                if (sliderElement) {
95                    sliderElement.scrollTo({ left: this.scrollLeft, behavior: 'smooth' });
96                }
97            })
98        }
99    }
100}