Create a autoplay banner carousel in LWC

				
					import { LightningElement, track } from 'lwc';

export default class HomeSlider extends LightningElement {
    @track slides = [
        {
            id: 0,
            image: 'https://res.cloudinary.com/epiphanystudios/image/upload/v1474325161/Billboard_-_AnalyticsBanner_s0vsiv.jpg',
            alt: 'Image 1',
            headings: 'Heading 1',
            paragraph: 'Paragraph 1',
            itemClass: 'slider-item active',
            dotClass: 'slider-dot active'
        },
        {
            id: 1,
            image: 'https://res.cloudinary.com/epiphanystudios/image/upload/v1474389520/Billboard_-_HipsterBanner_rzyv5r.jpg',
            alt: 'Image 2',
            headings: 'Heading 2',
            paragraph: 'Paragraph 2',
            itemClass: 'slider-item',
            dotClass: 'slider-dot'
        },
        {
            id: 2,
            image: 'https://res.cloudinary.com/epiphanystudios/image/upload/v1474389522/Billboard_-_ProductsBanner_kfucs3.jpg',
            alt: 'Image 3',
            headings: 'Heading 3',
            paragraph: 'Paragraph 3',
            itemClass: 'slider-item',
            dotClass: 'slider-dot'
        }
    ];

    @track currentSlide = 0;

    get carouselInnerStyle() {
        return `transform: translateX(${this.carouselOffset}%);`;
    }

    get carouselOffset() {
        return -this.currentSlide * 100;
    }

    handleDotClick(event) {
        const index = parseInt(event.target.dataset.index, 10);
        this.showSlide(index);
    }

    showSlide(index) {
        const totalSlides = this.slides.length;

        if (index >= totalSlides) {
            this.currentSlide = 0;
        } else if (index < 0) {
            this.currentSlide = totalSlides - 1;
        } else {
            this.currentSlide = index;
        }

        this.updateSlideClasses();
    }

    updateSlideClasses() {
        this.slides = this.slides.map((slide, index) => {
            return {
                ...slide,
                itemClass: index === this.currentSlide ? 'slider-item active' : 'slider-item',
                dotClass: index === this.currentSlide ? 'slider-dot active' : 'slider-dot'
            };
        });
    }

    connectedCallback() {
        this.startAutoSlide();
    }

    startAutoSlide() {
        this.intervalId = setInterval(() => {
            this.currentSlide = (this.currentSlide + 1) % this.slides.length;
            this.updateSlideClasses();
        }, 300000); 
    }


}