JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow"> <span class="buttons">
                 <input type="button" id="choosePic1" class="slideshowSelect" value="1">
                <input type="button" id="choosePic2" class="slideshowSelect" value="2">
                <input type="button" id="choosePic3" class="slideshowSelect"value="3" >
                <input type="button" id="choosePic4" class="slideshowSelect" value="4">
                <input type="button" id="choosePic5" class="slideshowSelect" value="5">
                </span> 
    <div class="current">
        <img src="http://lorempixel.com/400/200/abstract/" alt="Img" height="382" width="594">
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/people/" alt="Img" height="382" width="594">
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/sports/" alt="Img" height="382" width="594">
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/animals/" alt="Img" height="382" width="594">
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/nature/" alt="Img" height="382" width="594">
    </div>
</div>

CSS

#slideshow div {
    z-index: 0;
    position: absolute;
}
#slideshow div.previous {
    z-index: 1;
}
#slideshow div.current {
    z-index: 2;
}
.slideshowSelect {
   height:22px;
    width: 22px;
}

JavaScript

$(function () {
    "use strict";
    setInterval(function () {
        rotateImages()
    }, 10000);

    var pic1 = $('#slideshow div:first');
    var pic2 = $('#slideshow div:nth-child(2)');
    var pic3 = $('#slideshow div:nth-child(3)');
    var pic4 = $('#slideshow div:nth-child(4)');
    var pic5 = $('#slideshow div:last');

    $("#choosePic1").click(rotateImages(pic1));
    $("#choosePic2").click(rotateImages(pic2));
    $("#choosePic3").click(rotateImages(pic3));
    $("#choosePic4").click(rotateImages(pic4));
    $("#choosePic5").click(rotateImages(pic5));

});

function rotateImages(manualChange) {

        console.log(manualChange);
    var CurrentPhoto = $('#slideshow .current');
    if (manualChange !== undefined) {

        CurrentPhoto = manualChange;
    }
    var NextPhoto = CurrentPhoto.next();
    if (NextPhoto.length === 0) {
        NextPhoto = $('#slideshow div:first');
    }
    CurrentPhoto.removeClass('current').addClass('previous');
    NextPhoto.css({
        opacity: 0.0
    }).addClass('current')
        .animate({
        opacity: 1.0
    }, 1000,

    function () {
        CurrentPhoto.removeClass('previous');
    });
}