JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
    <img alt="figure 1" src="images/fig1.jpg" width="700" height="1300">
    <img alt="figure 2" src="images/fig1.jpg" width="700" height="1300">
    <img alt="figure 3" src="images/fig1.jpg" width="700" height="1300">
    <ul>
        <li class="button_left"><a href="#" title="Left">Left</a></li>
        <li class="button_right"><a href="#" title="Right">Right</a></li>
    </ul>
</div> <!-- End slider -->

CSS

.slider {width:200px;height:200px;overflow:hidden;}
.slider img {width:200px;height:200px;background:#000;position:absolute;}
.slider li {width:90px;height:90px;position:relative;color:#fff}

JavaScript

$(function() {
    rotatePics(1);
}

function rotatePics(currentPhoto) {
    var numberOfPhotos = $('.slider img').length;
    currentPhoto = currentPhoto % numberOfPhotos;

    $('.slider img').eq(currentPhoto).fadeOut(function() {
        // re-order the z-index
        $('.slider img').each(function(i) {
            $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos);

        });

        $(this).show();
        setTimeout(function() {
            rotatePics(++currentPhoto);
        }, 200);

    });
};