JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class="showcase_holder">
  <span class='showcase_prev'>prev</span>
  <div class="showcase_images">
     <div class='img1' style='display:block;'>
       <img src="http://griffusion.elementfx.com/mythnest/art/breed1/base/083.png"><br><b>Sky</b> the Unicorn, bred by Name
     </div>
     <div class='img2'>
       <img src="http://griffusion.elementfx.com/mythnest/art/breed2/base/153.png"><br><b>Cherry</b> the Griffin, bred by Name
     </div>
     <div class='img3'>
       <img src="http://griffusion.elementfx.com/mythnest/art/breed1/base/103.png"><br><b>Slate</b> the Unicorn, bred by Name
     </div>
     <div class='img4'>
        <img src="http://griffusion.elementfx.com/mythnest/art/breed1/base/063.png"><br><b>Emerald</b> the Unicorn, bred by Name
     </div>
     <div class='img5'>
        <img src="http://griffusion.elementfx.com/mythnest/art/breed2/base/113.png"><br><b>Stone</b> the Griffin, bred by Name
     </div>
     <div class='img6'>
        <img src="http://griffusion.elementfx.com/mythnest/art/breed1/base/043.png"><br><b>Sunny</b> the Unicorn, bred by Name
     </div>
  </div>
  <span class='showcase_next'>next</span>
</div>

<div class="showcase_nav">
   <div class='pet1 active' data-pet='1'>Sky</div>
   <div class='pet2' data-pet='2'>Cherry</div>
   <div class='pet3' data-pet='3'>Slate</div>
   <div class='pet4' data-pet='4'>Emer</div>
   <div class='pet5' data-pet='5'>Stone</div>
   <div class='pet6' data-pet='6'>Sunny</div>
</div>

CSS

div {box-sizing:border-box;}
.showcase_holder {margin:20px auto;width:600px;height:360px;border:1px solid grey;position:relative;text-align:center;background-image:url('http://res.freestockphotos.biz/pictures/5/5695-an-autumn-landscape-with-green-grass-pv.jpg');background-position:center;}
.showcase_images div {position:absolute;top:15px;left:50%;margin-left:-200px;display:none;}

.showcase_nav {width:400px;margin:auto;display:flex;justify-content:center;}
.showcase_nav div {width:50px;margin:5px;cursor:pointer;background-color:#ccc;border-radius:10px;padding:10px;}
.showcase_nav div.active {background-color:gold;}

.showcase_prev,.showcase_next {padding:10px;width:30px;background-color:#ccc;display:inline;border-radius:10px;position:absolute;top:50%;margin-top:-20px;cursor:pointer;}
.showcase_prev {left:10px;}
.showcase_next {right:10px;}

JavaScript

var active = 1; // current image shown
var max = 6; // how many pets there are, for looping

function updateImage(){
    $('.showcase_images div').fadeOut(300); // hide old image
    $('.img'+active).fadeIn(300); // show new image
    $('.showcase_nav div').removeClass('active'); // deselect
    $('.pet'+active).addClass('active'); // highlight thumb
     resetTime();
}

$('.showcase_nav div').click(function() {
    if( !$(this).hasClass('active') ){
        active = $(this).data('pet');
        updateImage();
    }
});

function lastPet(){
  active = active - 1; if(active < 1){active = max;}
  updateImage();
}
function nextPet(){
  active = active + 1; if(active > max){active = 1;}
  updateImage();
}

$('.showcase_next').click(function(){ nextPet(); });
$('.showcase_prev').click(function(){ lastPet(); });

// optional, every 3 seconds move to next image
var timeLoop = setInterval(function(){ nextPet(); },3000);
function resetTime(){
    clearInterval(timeLoop);
    timeLoop = setInterval(function(){ nextPet(); },3000);
}