JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/16438088/how-do-i-add-prev-and-next-buttons-to-my-jquery-slider

HTML

<div class="slider">
    <img id="1" src="http://www.gifmix.net/smileys/sports-smilies/5.gif" alt="" />
    <img id="2" src="http://www.gifmix.net/smileys/sports-smilies/6.gif" alt="" />
    <img id="3" src="http://www.gifmix.net/smileys/sports-smilies/7.gif" alt="" />
</div>

<div class="slider_nav">
	<span name="prev"> &lt; </span> -
    <span name="next"> &gt; </span>
</div>

CSS

.slider {
    position: relative;
    width:80%;
    height:350px;
    overflow: hidden;
    margin: 30px auto;
    border:1px solid orange;
}
.slider img {
    width: 100%;
    height: inherit;
    position:absolute;
    top:0;
    opacity:0;
}

.slider_nav {
    text-align: center;
    border: 10px solid green;
    width:150px;
    margin: 0 auto;
}

.slider_nav span {
    cursor:pointer;
}

JavaScript

function slider() {
        
        function animate_slider(){
            $('.slider #'+shown).animate({
                opacity:0 // fade out
            },1000);
            $('.slider #'+next_slide).animate({
                opacity:1.0 // fade in
            },1000);
            //console.log(shown, next_slide);
            shown = next_slide;
        }
    
        function choose_next() {
            next_slide = (shown == sc)? 1:shown+1;
            animate_slider();
        }
    
        $('.slider #1').css({opacity:1}); //show 1st image
        var shown = 1;
        var next_slide;
        var sc = $('.slider img').length; // total images
        var iv = setInterval(choose_next,3500);
        $('.slider_nav').hover(function(){
            clearInterval(iv); // stop animation
        }, function() {
            iv = setInterval(choose_next,3500); // resume animation
        });
        $('.slider_nav span').click(function(e){
            var n = e.target.getAttribute('name');
            //console.log(e.target.outerHTML, n);
            if (n=='prev') {
                next_slide = (shown == 1)? sc:shown-1;
            } else if(n=='next') {
                next_slide = (shown == sc)? 1:shown+1;
            } else {
                return;
            }
            animate_slider();
        });
    }
    
    window.onload = slider;