JSFiddle - React, Tailwind, and code Playground

by okke

HTML

<div class="slider-wrapper">
    <ul class="slider">
        <li class="slide activeSlide">1</li>
        <li class="slide">2</li>
        <li class="slide">3</li>
        <li class="slide">4</li>
    </ul>
</div>
<p class="slider-nav"><a href="#prev">prev</a> <a href="#next">next</a></p>
<p id="d">...</p>

CSS

.slider-wrapper { width: 100%; overflow: hidden; height: 200px; }
.slider, .slide { margin: 0; padding: 0; list-style: none; }
.slider { background: #eee; height: 200px; }
.slide { background: #ddd; width: 100%; float: left; height: 200px; font-size: 50px; }

JavaScript

$('.slider-nav a').click(function(e){
    e.preventDefault();
    $this = $(this);
    var $ul = $('.slider');
    var $lis = $ul.find('li');
    var i = $('.activeSlide').index($lis);
    if ($this.attr('href') == '#next') { i++; }
    else if ($this.attr('href') == '#next') { i--; }
    $ul.animate({'margin-left':'-'+i*100+'%'}, 500);
});