JSFiddle - React, Tailwind, and code Playground

by Nikola Mihin

HTML

<div class="sliderWrapp">
    <ul class="slider">
        <li>Slide 1</li><li>Slide 2</li><li>Slide 3</li>
    </ul>
</div>
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>

CSS

.sliderWrapp {
    float:left;
    width:100px;
    overflow:hidden;
    height:100px;
}
.slider {
    float:left;
    width:300px;
    margin:0;
    padding:0;
}
.slider li {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:red;
    text-align:center;
    line-height:100px;
    color:#fff;
}
.next {
    float:left;
    margin-left:20px;
}
.prev {
    float:left;
}

JavaScript

//DOM UTIL READY
$(document).ready(function() {
    SLIDER.init();
});

var SLIDER = {
    init: function() {
        this.actions();
    },
    actions: function() {
        this.slider();
    },
    slider: function(){
        var l = $('.slider li').length;
        var i = $('.active').index()+1;

        $('.next').on('click',function(e){
            e.preventDefault();
            $()
        });
        $('.prev').on('click',function(e){
            e.preventDefault();
        });
    }
}