JSFiddle - React, Tailwind, and code Playground

by tuckyeah

HTML

<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div class="slide active-slide first">
    <div class="content">
        <p>First Slide</p>
    </div>
</div>

<div class="slide">
    <div class="content">
        <p>second slide</p>
    </div>
</div>
<div class="slide last">
    <div class="content">
        <p>third slide</p>
    </div>
</div>
<div class="slider-nav">
    <div class="prev">
        prev
    </div>
    <div class="next">
        next
    </div>
</div>

CSS

.slide {
    display: none;
}

.active-slide {
    display: block;
}
    
.slider-nav {
    text-align: center;
    margin-top: 20px;
}

.prev {
    display: inline-block;
    margin: 10px;
}

.next {
    display: inline-block;
    margin: 10px;
}

JavaScript

var main = function() { 
    if($('.active-slide').hasClass('first')) {
       $('.prev').hide(); 
} else if ($('.active-slide').hasClass('last')) {
           $('.next').hide();
} else {
    $('.prev').show();
    $('.next').show();
}
$('.next').click(function() {
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next('.slide');

//if nextslide is last slide, go back to the first
        if(nextSlide.length===0) {
            nextSlide = $('.slide').first();
        } 

        currentSlide.fadeOut(500).removeClass('active-slide');
        nextSlide.fadeIn(1100).addClass('active-slide');

    });

//prev slide function
    $('.prev').click(function() {
        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.prev('.slide');
        
        if(prevSlide.length===0) {
            prevSlide = $('.slide').last();
        }
        
        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
    });
    
};

$(document).ready(main);