Basic slider

by dunerunner

HTML

<div class="slider">
    <ul class="slider-slides">
        <li class="slider-slides__slide slide1 active">1</li>
        <li class="slider-slides__slide slide2">2</li>
        <li class="slider-slides__slide slide3">3</li>
    </ul>
</div>

CSS

.slider {
    background: orange;
}
.slider-slides {
    list-style-type: none;
    height: 300px;
    position: relative;
    overflow: hidden;
}
.slider-slides__slide {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: translate3d(100%, 0, 0);
    transition: transform 1s linear;
}
.slider-slides__slide.slide1 {
    background: red;
}
.slider-slides__slide.slide2 {
    background: green;
}
.slider-slides__slide.slide3 {
    background: blue;
}
.slider-slides__slide.active {
    transform: translate3d(0, 0, 0);
    z-index: 2;
}
.slider-slides__slide.changing {
    transform: translate3d(-100%, 0, 0);
}

JavaScript

$(document).ready(function () {
    var slider = $('.slider');
    var slides = slider.find('.slider-slides__slide');
    
    var currentSlideIndex = 0;
    var numberOfSlides = slides.length - 1;
    var slideInterval = 3000;
    var animationPeriod = 1000;
    
    function showNextSlide() {
        var currentSlide = slides[currentSlideIndex];
        var nextSlide;
        $(currentSlide).addClass('changing');
        
        if (currentSlideIndex !== numberOfSlides) {
            nextSlide = slides[currentSlideIndex + 1];
            currentSlideIndex++;
        } else {
            currentSlideIndex = 0;
            nextSlide = slides[currentSlideIndex];
        }
        
        setTimeout(function () {
            $(currentSlide).removeClass('active').removeClass('changing');
        }, animationPeriod);
        
        $(nextSlide).addClass('active');
        
        setTimeout(function () {
            showNextSlide();
        }, slideInterval);
    }
    
    setTimeout(function () {
        showNextSlide();
    }, slideInterval);
});