JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="SlideWrap">
    <div class="SlideInner">
        <img src="http://placekitten.com/g/300/200" alt="" />
        <img src="http://placekitten.com/g/300/200" alt="" />
        <img src="http://placekitten.com/g/300/200" alt="" />
        <img src="http://placekitten.com/g/300/200" alt="" />
        <img src="http://placekitten.com/g/300/200" alt="" />
        <img src="http://placekitten.com/g/300/200" alt="" />
        <img src="http://placekitten.com/g/300/200" alt="" />
        <img src="http://placekitten.com/g/300/200" alt="" />
        <img src="http://placekitten.com/g/300/200" alt="" />
        <img src="http://placekitten.com/g/300/200" alt="" />
    </div>
</div>

<span class="Prev">Previous</span> | <span class="Next">Next</span>

CSS

.SlideWrap {
    overflow: hidden;
    position: relative;
}

.SlideInner {
    position: absolute; 
    top: 0px;
}

.SlideWrap img {
    float: left;
    position: absolute;
    top: 0px;
    left: 0px;
}

.Visible,
.V_left,
.V_right {
    position: relative !important;
}

JavaScript

var SlideWrap = $('.SlideWrap');
var SlideInner = $('.SlideInner');
var thisIMG = $(this).find('img');

SlideWrap
    .css({ 
        width: thisIMG.width(), 
        height: thisIMG.height() 
});

    
SlideWrap
    .find('img:first-child')
    .addClass('Visible');
    
var Visible = $('.Visible');

VisibleLeftRight();
    
SlideInner
    .css({
        width: Visible.width() * 3 , 
        left: -Visible.width()
    });

$('.Prev').click(function(){
    SlideWrap.find('.Visible')
        .prev().addClass('Visible')
        .next().removeClass('Visible');
    VisibleLeftRight();
    
});
$('.Next').click(function(){
    SlideWrap.find('.Visible')
        .next().addClass('Visible')
        .prev().removeClass('Visible');
    VisibleLeftRight();

});

function VisibleLeftRight() {
    
    if(
        SlideWrap
            .find('img:first-child')
            .hasClass('Visible') 
      ) {

        SlideWrap
            .find('img:last-child')
            .addClass('V_left');
    }
    else{
        Extras();
    }
    

}

function Extras() {
        SlideWrap.find('img').removeClass('V_left V_right');        
        Visible.prev().addClass('V_left').next().addClass('V_right');
}