JSFiddle - React, Tailwind, and code Playground

by Vu Khanh

HTML

<div class="sls"> <!-- sls = slides -->
    <ol class="sls-numbers-nav"><!-- sls-nav = slides-nav -->
        <li><a href="" data-num="0">Slide 1</a></li>
        <li><a href="" data-num="1">Slide 2</a></li>
        <li><a href="" data-num="2">Slide 3</a></li>
        <li><a href="" data-num="3">Slide 4</a></li>
    </ol>
    
    <ol class="sls-box"><!-- sls-box = slides-box -->
        <li class="sls-box-sl"></li> <!-- sls-box-sl = slides-box-slide -->
        <li class="sls-box-sl"></li>
        <li class="sls-box-sl"></li>
        <li class="sls-box-sl"></li>
    </ol>

</div>

CSS

.sls-numbers-nav li,
.sls-closest-nav li{
    display: inline-block; /*makes nav horizontal*/
    
}

.sls-box {
    overflow: hidden;
    height: 200px; /*height for the slides' box*/
    white-space: nowrap;
    font-size: 0; /*removes whitespace between slides - they're inline-blocks*/
}

.sls-box-sl {
    display: inline-block;
    height: 100%; 
    width: 100%;
    -webkit-transition: 0.6s ease-in-out; /*controls the slides transition duration and style*/
}






/*styles below are irrelevant*/
.sls-box-sl:nth-child(1) {
    background: red;
}

.sls-box-sl:nth-child(2) {
    background: blue;
}

.sls-box-sl:nth-child(3) {
    background: grey;
}

.sls-box-sl:nth-child(4) {
    background: yellow;
}

JavaScript

$(function() {
    var numbers_nav = $('.sls-numbers-nav'),
        closest_nav = $('.sls-closest-nav'),
        slides = $('.sls-box-sl'),
        first_slide = slides.eq(0),
        current_slide_index = 0,
        max_slide_index = slides.length - 1,
        running =  false;

    numbers_nav.on('click', 'a', function(e) {
        e.preventDefault();
        if( running ) return;
        
        var tg = $(e.target);
        if (tg.data('num') === current_slide_index ) return;
            current_slide_index = tg.data('num');
        
        
        
        first_slide.css('margin-left', current_slide_index * -100 + '%');
        running = true;
    });
    
    closest_nav.on('click', 'a', function(e) {
        e.preventDefault();
        if( running ) return;
        
        var tg = $(e.target),
            tg_direction = tg.data('direction'),
            y = 0;
        
        
        
        if (tg_direction === 'prev' ) {
            if (current_slide_index > 0 ) { 
                y = -1; 
            } else {
                return;
            }
        } else if (tg_direction === 'next') {
            if ( current_slide_index < max_slide_index ) { 
                y = 1; 
            } else {
                return;
            }
        }
        
        current_slide_index += y
        first_slide.css('margin-left', (current_slide_index) * -100 + '%');
        running = true;
    });
    
    first_slide.on('webkitTransitionEnd oTransitionEnd transitionend msTransitionEnd', function () {
        running = false;
    });
    
});