JSFiddle - React, Tailwind, and code Playground

by Sam Liew

HTML

<div id="textSlider">
    <p>This is the first test sentence</p>
    <p>This is a another test sentence</p>
    <p>One more test sentence</p>
    <p>The final test sentence</p>
</div>

<div id="textSlider-buttons">
    <a href="#" class='prev'>Prev</a>
    <a href="#" class='next'>Next</a>
</div>

CSS

#textSlider > * {
    display: none;
}

#textSlider > .active {
    display: block;
}

#textSlider > buttons a {
    display: inline-block;
    padding: 3px 5px;
    border: 1px solid #ccc;
}

JavaScript

$(function() {
    var slides = $('#textSlider').children();
    var currentSlide = 0;
    
    // show first item
    slides.eq(0).addClass('active');
    
    // on button click
    $('#textSlider-buttons').on('click', 'a', function() {
        
        // increment or decrement slide number
        $(this).attr('class') == 'prev' ? currentSlide-- : currentSlide++;
        
        // if over number of slides, or less than zero, make adjustments
        if(currentSlide >= slides.length) currentSlide = 0;
        if(currentSlide < 0) currentSlide = slides.length-1;
        
        // display current slide
        slides.removeClass('active').eq(currentSlide).addClass('active');
    });
});