JSFiddle - React, Tailwind, and code Playground

by tmyie

HTML

<div class="container">
    <div class="slide">1</div>
    <div class="slide">2</div>
    <div class="slide">3</div>
    <div class="slide">4</div>
    <div class="slide">5</div>
</div>

<div class="next">next</div>
<div class="prev">prev</div>

CSS

.container {
    width: 300px;
    height: 200px;
    background-color: lightgrey;
    position: relative;
    overflow:hidden;
}

.container .slide {
    float: left;
    width: 100px;
    height: 200px;
    background-color: orange;
}

.container .slide:nth-of-type(odd) {
    background-color: salmon;
}

JavaScript

var i = 0;

$('.next').click(function(){
    i++;
    console.log(i);
   t = $(' .container .slide').first();
    t.hide().appendTo('.container').delay(1000).fadeIn(4000);
    
});

$('.prev').click(function(){
    i++;
    console.log(i);
   t = $(' .container .slide').last();
    t.prependTo('.container');
    
});