JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="thumbs">
    <li class="small-img current"><img src="http://lorempixel.com/80/80/sports/1" /></li>
    <li class="small-img"><img src="http://lorempixel.com/80/80/sports/2" /></li>
    <li class="small-img"><img src="http://lorempixel.com/80/80/sports/3" /></li>
</ul>
<hr />
<br />
<div class="feature-photo">
    <img />
</div>

JavaScript

var intervalId;
$(function(){
   
   
    function cycleImage(){
        
        var onLastLi = $("#thumbs li:last").hasClass("current");
        console.log(onLastLi);
        
        var currentImage = $("#thumbs li.current img");
        var targetImage = $('div.feature-photo img');
        console.info(currentImage);
        console.info(targetImage);        
        $(targetImage).hide().attr('src', $(currentImage).attr('src')).fadeIn();
        
        var currentLi = $("#thumbs li.current");
        currentLi.removeClass("current");
        
        if(onLastLi){
            $("#thumbs li:first").addClass("current");
        }
        
        currentLi.next().addClass("current");
                
    };
    
   intervalID = setInterval(cycleImage, 1000); 
    
    
    
})