JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div id="slider">
    <div class="slide1"></div>
    <div class="slide2"></div>
    <div class="slide3"></div>
    <div class="slide4"></div>
</div>
<div class="button">button</div>
<div class="button2">button</div>

JavaScript

$(function(){
    $('#slider div:first-child').addClass('active');

    $('.arrow').on('click', function(){
        updateClass( $(this).attr('data-dir') );
    });

});

function updateClass ( direction )
{
    var current = $('#slider .active');

    if ( direction == 'left' && current.index() > 0 )
    {
        current.removeClass('active');
        current.prev().addClass('active');
    }
    else if ( direction == 'right' && current.index() < $('#slider div:last-child').index() )
    {
        current.removeClass('active');
        current.next().addClass('active');
    }
}

$(document).ready(function(){
    $('.button').on('click', function() {
        updateClass('right');
    });
    
    $('.button2').on('click', function() {
        updateClass('left');
    });
});