JSFiddle - React, Tailwind, and code Playground

HTML

<div class='col-md-12 highlight'>
    <img id='gallery' src='http://www.placehold.it/300x300' height='300' class='highlight_img'/><br/>
    <span id='highlight_caption' class='highlight_caption'>title1</span>
</div>

<div class='list'>
    <div><img class='thumb' src='http://www.placehold.it/400x400' height='75' title='title1'/></div>
 <div><img class='thumb' src='http://www.placehold.it/500x500' height='75' title='title2'/></div>
 <div><img class='thumb' src='http://www.placehold.it/350x350' height='75' title='title3'/></div>

JavaScript

$(document).ready(function() {
    var index         = 1,
        images        = ['300x300','290x300','280x300'],
        caption_text  = ['title1','title2','title3'],
        timer         = null;
     
    function rotateImage () {

       $('#gallery').fadeOut('fast', function() { 
        $(this).attr('src','http://www.placehold.it/'+ images[index]);
        $('span').text(caption_text[index]);
        $(this).fadeIn('fast', function() { 
          if (index == images.length-1) {
            index = 0;
          } else {
            index++;
          }
        });
      });

    } 
    timer = setInterval (rotateImage, 2500);

$('.thumb').on('click', function() {
        var $this      = $(this),
            img        = $this.attr('src'),
            imageTitle = $this.attr('title');      
        $('.highlight')
            .children('img')
            .attr('src',img)
            .show()
            .end()
                .children('.highlight_caption')
                    .text(imageTitle);
        clearInterval(timer);
        setInterval(rotateImage, 5000);  
    });
 });