Coffee Luv Bug Design System

Carousel

In our app we use a slideshow component for cycling through images.

Here is an example of a carousel,

How to Implement Carousel?

Here is the html code of our app's carousel

        
        <div class="slideshow-container">                                
        <div class="mySlides fade">
        <img src="images/img1.png" alt="img1" style="width:100%">
        </div>
        <div class="mySlides fade">
        <img src="images/img2.png" alt="img1" style="width:100%">
        </div>
        <div class="mySlides fade">
        <img src="images/img3.png" alt="img1" style="width:100%">
        </div>
        </div>
        <div style="text-align:center">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
        </div>

Here is the css code of our app's carousel

        
            .slideshow-container
            {
            max-width: 1000px;
            position: relative;
            margin: auto;
            }  
            .mySlides
                {
            display: none;
            }     
            .dot 
            {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
            }      
            .active, .dot:hover
                {
            background-color: #717171;
            }         
            .fade 
            {
            animation-name: fade;
            animation-duration: 1.5s;
            }            
            @keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
            }

Here is the js code of our app's carousel

        
        let slideIndex = 0;
        showSlides();
        
        function showSlides() {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}
        slides[slideIndex-1].style.display = "block";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
        }