JSFiddle - React, Tailwind, and code Playground

by Alen Doe

JavaScript

var slideWidth = 300; 

    $('.slidewrapper').width($('.slidewrapper').children().length * slideWidth);

    $('#next_slide').click(nextSlide);
    $('#prev_slide').click(prevSlide);

function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;

    if(currentSlide>=$('.slidewrapper').children().length)
    {
        $('.slidewrapper').css('left',-(currentSlide-2)*slideWidth);  
        $('.slidewrapper').append($('.slidewrapper').children().first().clone()); 
        $('.slidewrapper').children().first().remove();
        currentSlide--;                        
    }

    $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
}
function prevSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide--;
    if(currentSlide<0)
    {
        $('.slidewrapper').css('left',-(currentSlide+2)*slideWidth);  
        $('.slidewrapper').prepend($('.slidewrapper').children().last().clone()); 
        $('.slidewrapper').children().last().remove();
        currentSlide++;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
}