JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="_content_slider">
    <div class="_slides">
        <div class="_slide __this">1</div>
        <div class="_slide">2</div>
        <div class="_slide">3</div>
        <div class="_slide">4</div>
        <div class="_slide">5</div>
    </div> <span class="_control __prev"></span>
 <span class="_control __next"></span>

</div>

CSS

._content_slider {
    width: 500px;
    height: 200px;
    overflow: hidden;
    position: relative;
    padding: 0 50px;
}
._control {
    display: inline-block;
    width: 50px;
    height: 200px;
    position: absolute;
    z-index: 9;
    left: 0;
    top: 0;
    background: white;
}
._control::after {
    content:'';
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    border-right: solid 20px black;
    border-top: solid 20px transparent;
    border-bottom: solid 20px transparent;
}
._control.__next {
    left: auto;
    right: 0;
}
._control.__next::after {
    border-left: solid 20px black;
    border-right: none;
}
._slides {
    display: inline-block;
    height: 200px;
    overflow: hidden;
    position: relative;
    left:0;
}
._slide {
    display: inline-block;
    float: left;
    width: 500px;
    height: 200px;
    background: #e2e2e2;
    text-align: center;
    line-height: 12em;
}

JavaScript

function animate(params) {
    var start = new Date();
    var timer = setInterval(function () {
        var progress = (new Date() - start) / params.duration;
        progress = (progress > 1 && 1) || progress;
        params.step(easeOutCubic(progress));
        if (progress === 1) {
            if (params.done && typeof(params.done) === 'function') {
                params.done();
            }
            clearInterval(timer);
        }
    }, params.delay || 10);
}

function easeOutCubic(t) {
    return (--t)*t*t+1
};


function init(slider) {
    var prev = slider.querySelector('.__prev'), //control
        next = slider.querySelector('.__next'), //control
        slidesWrap = slider.querySelector('._slides'),
        slides = slider.querySelectorAll('._slide'),
        slideWidth = slidesWrap.offsetWidth,
        q = slides.length,
        i = 1;

    slidesWrap.style.width = slideWidth * q + 'px';

    function move(n){ // n — sets direction of movement, +1 for prev and -1 for prev

        var outsideSlide = slider.querySelectorAll('._slide')[(n < 0 ? 0 : q - 1)];
        
        if (n == 0) {
            slidesWrap.removeChild(outsideSlide);
            slidesWrap.insertBefore(outsideSlide, slidesWrap.firstChild);
           // slidesWrap.style.paddingLeft = currentPadding - slideWidth + 'px';   
        }
        
  
        
        animate({
            duration: 650,
            step: function (progress) {
                console.log(i)       
                slidesWrap.style.left = ((i-2)*slideWidth)+((slideWidth * progress) * n) + 'px';
            },
            done: function () {
                slidesWrap.style.paddingLeft = (currentPadding + slideWidth*n) + 'px';   
                if (n == 0) {
                    slidesWrap.removeChild(outsideSlide);
                    slidesWrap.appendChild(outsideSlide);
                    
                }                 
            }
            
        })


           ...