Infinite auto carousel slider with navigators buttons and balls

index.html

<div class="container">
        <div class="carousel">
          <span class="slider-id">1</span>
            <di class="controls">
                <span class="arrow prev">Prev</span>
                <span class="arrow next">Next</span>
            </di>            
            <div class="slider">
                <section id="1" class="slide">
                  <img src="https://res.cloudinary.com/dq8h1tfis/image/upload/v1593475229/Infinite%20auto%20carousel%20slider%20with%20navigators%20buttons%20and%20%20balls/1_vtswce.jpg" alt="" />
                    
                  </section>
                <section id="2" class="slide">
                  <img src="https://res.cloudinary.com/dq8h1tfis/image/upload/v1593475165/Infinite%20auto%20carousel%20slider%20with%20navigators%20buttons%20and%20%20balls/2_onu82h.jpg" alt="" />
              </section>
                <section id="3" class="slide">
                  <img src="https://res.cloudinary.com/dq8h1tfis/image/upload/v1593475131/Infinite%20auto%20carousel%20slider%20with%20navigators%20buttons%20and%20%20balls/3_igj0pr.jpg" alt="" />
              </section>
                <section id="4" class="slide">
                  <img src="https://res.cloudinary.com/dq8h1tfis/image/upload/v1593454637/Infinite%20auto%20carousel%20slider%20with%20navigators%20buttons%20and%20%20balls/4_fc9s2k.jpg" alt="" />
                  
                </section>
                <section id="5" class="slide">
                  <img src="https://res.cloudinary.com/dq8h1tfis/image/upload/v1593454636/Infinite%20auto%20carousel%20slider%20with%20navigators%20buttons%20and%20%20balls/5_wttoyn.jpg" alt="" />
                    
                  </section>
                <section id="6" class="slide">
                  <img src="https://res.cloudinary.com/dq8h1tfis/image/upload/v1593475229/Infinite%20auto%20carousel%20slider%20with%20navigators%20buttons%20and%20%20balls/1_vtswce.jpg" alt="" />
                  
                </section>
            </div>
            <ul class="balls">
                <li id="mb1" class="main-slider-ball">1</li>
                <li id="mb2" class="main-slider-ball">2</li>
                <li id="mb3" class="main-slider-ball">3</li>
                <li id="mb4" class="main-slider-ball">4</li>
                <li id="mb5" class="main-slider-ball">5</li>
            </ul>
        </div>    
    </div>

infinite-auto-carousel-slider-with-navigators-buttons-and-balls.markdown

Infinite auto carousel slider with navigators buttons and balls

A Pen by Hosny Abdel Fattah on CodePen.

License.

script.js

// Get The Slider Elements
const carousel  = document.querySelector(".carousel");
const sliderId  = document.querySelector(".slider-id");
const slider    = document.querySelector(".slider");
const slides    = document.querySelectorAll(".slide");
const prev      = document.querySelector(".prev");
const next      = document.querySelector(".next");
const balls     = document.querySelector(".balls");
const mainSliderBall      = document.querySelectorAll(".main-slider-ball");

// Set Active elements
slides[0].classList.add('active');
mainSliderBall[0].classList.add('active-ball');

// Count the slides
let slidesArray = Array.from(slides)
let slidesLength = slidesArray.length;


function getSliderID() {
    if(document.querySelector(".active") != null){
        let currentSlideId = document.querySelector(".active").id;
        if(currentSlideId < slidesLength){
            sliderId.innerHTML = currentSlideId;
        } else {
            sliderId.innerHTML = 1;
        }
    }
}

    // Function to move    
    function maineSlider(sliderName,slidesLength, currentSlide = 0){
        function carouselMove() {
        let translateXSize = 100 / slidesLength; // The space that the slider goes.

        // To decide the active slide and move it.
        if(currentSlide < slidesLength){
            // remove the active class from all slides and add it to the current slide.
            slides.forEach(element => {
                element.classList.remove("active");
            });
            slides[currentSlide].classList.add("active");
            
            sliderName.style.transform = `translateX(calc(-${translateXSize}% * ${currentSlide}))`;
            changeBall();
            getSliderID();          
            currentSlide++;
            
        } else if (currentSlide == slidesLength ){
                // remove the active class from all slides and add it to the current slide.
                slides.forEach(element => {
                    element.classList.remove("active");
                });
                
                currentSlide = 0;
                sliderName.style.transition = 'none';
                sliderName.style.transform = `translateX(0)`;  
                setTimeout(function(){
                    sliderName.style.transition = 'all 1s';            
                });
                changeBall();
                getSliderID();
            }
        }
    // Play the autoplay slider
    auto = setInterval(function(){
        carouselMove();
    }, 2000);
}

maineSlider(slider,slidesLength);



// To Next Slide
function toNext() {
    let current = parseInt(document.querySelector(".active").id);
    console.log(current);
    let moveSize = 100 / slidesLength;
    // Stop the auto slider.
    clearTimeout(auto);
    // clear the active class from all slides.
        slides.forEach(element => {
        element.classList.remove("active");
        });
    // check if the next slide is not the last slide to make the effect
    if(current < slidesLength){   
        slides[current].classList.add("active");      
        slider.style.transform = `translateX(calc(-${moveSize}% * ${current}))`;
        changeBall();
        getSliderID();
    } else {
        current = 0;
        slider.style.transition = 'none';
        slider.style.transform  = `translateX(0)`;    
        setInterval(function(){
            slider.style.transition = 'all 1s';            
        });
        slides[current].classList.add("active");
        slider.style.transform = `translateX(calc(-${moveSize}% * ${current}))`;
        changeBall();
        getSliderID();
    }
    
    auto = setTimeout(function(){
            maineSlider(slider, slidesLength, current);
        }, 2000);
}

// To Previous slide
function toPrev() {
    let current = parseInt(document.querySelector(".active").id);
    let moveSize = 100 / slidesLength;

    // Stop the auto slider.
    clearTimeout(auto);
    // clear the active class from all slides.
        slides.forEach(element => {
        element.classList.remove("active");
        });        
    // check if the next slide is not the last slide to make the effect
    if(current > 1){  
        current -= 2;
        slides[current].classList.add("active"); 
        slider.style.transform = `translateX(calc(-${moveSize}% * ${current}))`;
        changeBall();
        getSliderID();
    } else if(current == 1 || current == null){
        current = slides.length - 1;        
        slides[current].classList.add("active");
        slider.style.transition = 'none';
        slider.style.transform  = `translateX(slidesLength)`;        
        setInterval(function(){
            slider.style.transition = 'all 1s';            
        });
        slider.style.transform = `translateX(calc(-${moveSize}% * ${slidesLength - 2}))`;
        changeBall();
        getSliderID();
    }

    // Play the auto slider again.
    auto = setTimeout(function(){
            maineSlider(slider, slidesLength, current);
        }, 2000);
}

//Call the PREV & NEXT functions.
prev.onclick = toPrev;
next.onclick = toNext;

// Power the balls

mainSliderBall.forEach((element) => {
    element.setAttribute('onclick', `showSlide('${element.id}')`);
});

function showSlide(id, sliderName) {
    sliderName = slider;
    mainSliderBall.forEach(element => element.classList.remove("active-ball"));
    document.querySelector(`#${id}`).classList.add(`active-ball`);
    let currentSlide = parseInt(id.split('').pop()) - 1;
    let translateXSize = 100 / slidesLength;
    console.log(translateXSize);

    clearTimeout(auto);
    sliderName.style.transform = `translateX(calc(-${translateXSize}% * ${currentSlide}))`;
    // Play the auto slider again.
    auto = setTimeout(function(){
        maineSlider(slider, slidesLength, currentSlide);
    }, 2000);
}


        // Select the active slider ball number
        function changeBall(){
            if(document.querySelector(".active") != null){
                let currentSlide = parseInt(document.querySelector(".active").id);            
            
                if(currentSlide < slidesLength && currentSlide != 1) {
                    let ballID = `#mb${currentSlide}`;
                    mainSliderBall.forEach(element => element.classList.remove("active-ball"));
                    let currentBall = document.querySelector(ballID);
                    currentBall.classList.add('active-ball');
                } else if (currentSlide == 1 || currentSlide == slidesLength) {
                    mainSliderBall.forEach(element => element.classList.remove("active-ball"));
                    ballID = '#mb1';
                    currentBall = document.querySelector(ballID);
                    currentBall.classList.add('active-ball');
                }
            }
        }
        

style.css

*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


.container {
    margin: 0px auto;
    width: 100%;
    height: 100vh;
}

.carousel {   
    z-index: 10;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
}

span.slider-id{
    z-index: 20;
    position: absolute;
    display: block;
    top: 10px;
    left: 10px;
    border: 3px solid #F0F;
    color: orangered;
    width: 50px;
    height: 50px;
    line-height: 43px;
    border-radius: 30%;
    font-weight: 900;
    font-size: 20px;
    text-align: center;
    color: #FFF;
    
}

.arrow {
    z-index: 19;
    color: #0f0;
    font-size: 20px;
    background-color: rgba(4, 43, 105, 0.4);
    width: 90px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    position: absolute;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
}
span.prev{
    left: 0;
    border-radius:  0 30% 30% 0 ;
}

span.next{
    right: 0;
    border-radius: 30% 0 0 30%;
}

.slider {
    position: absolute;
    width: 600%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    transition: all 1s;
}

.slider section{
    position: relative;
    flex-basis: 20%;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider section img {
    flex-basis: 100%;
    flex-grow: 1;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
}

.balls {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    list-style: none;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.balls li{
    z-index: 19;
    margin-left: 5px;
    font-size: 16px;
    font-weight: 800;
    color: #FFF;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 35px;
    border-radius: 50%;
    background-color: rgb(138, 43, 226, .3);
    border: 3px solid #0f0;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

li.active-ball {
    background-color: blueviolet;
    border: 3px solid rgb(255, 215, 0);
}