<div data-content-type="html" data-appearance="default" data-element="main">&lt;script&gt;
        document.addEventListener('alpine:init', () =&gt; {
            Alpine.data('slider', () =&gt; ({
                currentSlide: 0,
                slides: [
                    {
                        src: '/media/wysiwyg/Banner-01.jpg',
                        mobileSrc: '/media/wysiwyg/Web-03.jpg',
                        alt: 'Slide 1'
                    },
                    {
                        src: '/media/wysiwyg/Banner-02.jpg',
                        mobileSrc: '/media/wysiwyg/Web-04.jpg',
                        alt: 'Slide 2'
                    },
                    {
                        src: '/media/wysiwyg/banner3.png',
                        mobileSrc: '/media/wysiwyg/banner3.png',
                        alt: 'Slide 3'
                    },
                ],
                interval: null,

                // Start the automatic slide show
                init() {
                    this.startAutoSlide();
                },

                // Change to the next slide
                nextSlide() {
                    this.currentSlide = (this.currentSlide + 1) % this.slides.length;
                },

                // Change to the previous slide
                prevSlide() {
                    this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length;
                },

                // Go to a specific slide
                goToSlide(index) {
                    this.currentSlide = index;
                },

                // Start automatic slide transition
                startAutoSlide() {
                    this.interval = setInterval(() =&gt; {
                        this.nextSlide();
                    }, 5000); // Change slide every 3 seconds
                },

                // Stop automatic slide transition
                stopAutoSlide() {
                    clearInterval(this.interval);
                }
            }));
        });
    &lt;/script&gt;</div>