JSFiddle - React, Tailwind, and code Playground

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

function checkNavigation() {

    if ($('.active-slide').hasClass('first')) {
        $('.prev').hide();
        $('.next').show();
    } else if ($('.active-slide').hasClass('last')) {
        $('.next').hide();
        $('.prev').show();
    } else {
        $('.prev').show();
        $('.next').show();
    }

}

var main = function () {
    checkNavigation();
    
    $('.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');

        checkNavigation();
    });

    //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');
         checkNavigation();
    });
   

};

$(document).ready(main);