JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div id="container">
            <header>
                <h1>jQuery Content Slider</h1>
            </header>
            <img src="http://leedspromoproducts.com/templates//img/thumbnails_prev_button.png" alt="Prev" id="prev">
            <div id="slider">
                <div class="slide">
                    <div class="slide-copy">
                        <h2>Slider One</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
                    </div>
                    <img src="http://www.vectordiary.com/isd_premium/048-hot-air-balloon/hot-air-balloon.jpg">
                </div>

                <div class="slide">
                    <div class="slide-copy">
                        <h2>Slider Two</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
                    </div>
                    <img src="http://www.moneyindices.com/admin/upload/50193693.jpg">
                </div>

                <div class="slide">
                    <div class="slide-copy">
                        <h2>Slider Three</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
                    </div>
                    <img src="http://images.china.cn/attachement/jpg/site1007/20110808/000cf1a48f870fa9c75c55.jpg">
                </div>

                <div class="slide">
                    <div class="slide-copy">
                        <h2>Slider Four</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur...

CSS

*{
    margin:0;
    padding:0;
}

body{
    font-family:'Arial', sans-serif;
    font-size:14px;
    color:#fff;
    background:#333;
    line-height:1.6em;
}

a{
    color:#fff;
    text-decoration:none;
}

h1{
    text-align:center;
    margin-bottom:20px;
}

#container{
    width:980px;
    margin:40px auto;
    overflow:hidden;
}

#slider{
    width:500px;
    height:300px;
    position:relative;
    overflow:hidden;
    float:left;
    padding:3px;
    border:#666 solid 2px;
    border-radius:5px;
}

#slider img{
    width:500px;
    height:300px;
}

.slide{
    position:absolute;
}

.slide-copy{
    position:absolute;
    bottom:0;
    left:0;
    padding:20px;
    background:7f7f7f;
    background: rgba(0,0,0,0.5);
}

#prev, #next{
    float:left;
    margin-top:130px;
    cursor:pointer;
    position:relative;
    z-index:100;
}

#prev{
    margin-right:-45px;
}

#next{
    margin-left:-45px;
}

JavaScript

//(document).ready(); makes sure that all elements on the page are
//loaded before loading the script
$(document).ready(function() {
    //alert('Doc is loaded');   

    //specifies speed to change from image to image, in ms
    var speed = 500;

    //specifies auto slider option
    var autoswitch = true;

    //Autoslider speed
    var autoswitch_speed = 4000;

    //Add initial active class
    $('.slide').first().addClass('active');

    //Hide all slides
    $('.slide').hide();

    //Show first slide
    $('.active').show();

    $('#next').on('click', function(){
        $('.active').removeClass('active').addClass('oldActive');
        if($('.oldactive').is('slider:last-child')){
            //alert('true');
            $('.slide').first().addClass('active');
        } else {
            $('.oldActive').next().addClass('active');  
        }
        $('.oldActive').removeClass('oldActive');
        $('.slide').fadeOut(speed);
        $('.active').fadeIn(speed);

    });

    $('#prev').on('click', function(){
        $('.active').removeClass('active').addClass('oldActive');
        if($('.oldactive').is(':first-child')){
            $('.slide').last().addClass('active');
        } else {
            $('.oldActive').prev().addClass('active');  
        }
        $('.oldActive').removeClass('oldActive');
        $('.slide').fadeOut(speed);
        $('.active').fadeIn(speed);

    });
});


var cur = 0,    // Start Slide Index. We'll use ++cur to increment index
    pau = 2000,            // Pause Time (ms)
    fad = 500,             // Fade Time (ms)
    $ga = $('#slider'),   // Cache Gallery Element
    $sl = $('> div', $ga), // Cache Slides Elements
    tot = $sl.length,      // We'll use cur%tot to reset to first slide
    itv ;                  // Used to clear on mouseenter

$sl.hide().eq( cur ).show(); // Hide all Slides but desired one

function stopFn() { clearInterval(itv); }
function loopFn() { itv = setInterval(fadeFn, pau); }
function fadeFn()...