JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<div id="slideshow">
    <ul id="slide-wrapper">
        <li>
            <img src="http://placekitten.com/120/120" />
            <p class="caption-title">Linkin Park's 'The Hunting Party': Track-by-Track Review</p>
        </li>
        <li>
            <img src="http://placekitten.com/120/120" />
            <p class="caption-title">Exclusive: The Griswolds Premiere New Song '16 Years' &amp; Talk Debut Album</p>
        </li>
        <li>
            <img src="http://placekitten.com/120/120" />
            <p class="caption-title">Bottled Water Comes From the Most Drought-Ridden Places in the Country</p>
        </li>
        <li>
            <img src="http://placekitten.com/120/120" />
            <p class="caption-title">Sarah Jaffe Video Premiere Watch The Haunting Lover Girl Clip</p>
        </li>
    </ul>
    <ul class="thumnails">
        <li class="img-thum active">
            <img src="http://placekitten.com/120/120" />
            <p class="thum-capt">Linkin Park's 'The Hunting Party': Track-by-Track Review</p>
        </li>
        <li class="img-thum">
            <img src="http://placekitten.com/120/120" />
            <p class="thum-capt">Exclusive: The Griswolds Premiere New Song '16 Years' &amp; Talk Debut Album</p>
        </li>
        <li class="img-thum">
            <img src="http://placekitten.com/120/120" />
            <p class="thum-capt">Bottled Water Comes From the Most Drought-Ridden Places in the Country</p>
        </li>
        <li class="img-thum">
            <img src="http://placekitten.com/120/120" />
            <p class="thum-capt">Sarah Jaffe Video Premiere Watch The Haunting Lover Girl Clip</p>
        </li>
    </ul>
</div>

CSS

#slideshow {
    width: 100%;
    display: block;
    float: left;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border-bottom: solid thin #d0cccc;
}
#slide-wrapper {
    overflow:hidden;
    background:black;
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}
#slide-wrapper p {
    padding: 12px;
    margin: 0;
}
#slide-wrapper li {
    display: none;
}
#slide-wrapper li:first-child {
    display: block;
}
.caption-title {
    font-size: 24px;
    color: white;
    text-align: center;
}
.thumnails {
    width: 100%;
    display: block;
    float: left;
    padding: 0;
    margin: 12px auto;
    position: relative;
    list-style: none;
    text-align: justify;
}
.thumnails .img-thum {
    width: 23%;
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    position: relative;
}
.thumnails .img-thum.active img {
    background: #000;
    padding:2px;
}
.thumnails .img-thum.active:after {
    content:"";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 50%;
    margin: -10px 0 0 0px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 10px solid black;
}
.thumnails .img-thum img {
    width: 100%;
    padding: 2px;
    margin: 0;
}
.thumnails .img-thum .thum-capt {
    width: 100%;
    float: left;
    overflow: hidden;
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    font-weight: bold;
    font-size: 14px;
    font-family: serif;
    text-align: left;
}
.thumnails:after {
    content:'';
    width: 100%;
    display: inline-block;
}

JavaScript

//When we click on thumb img
$('.thumnails li').click(function () {

    var
    $this = $(this),
        //SlideShow
        sshow = $(this).closest('#slideshow'),
        //Big
        big = sshow.find('#slide-wrapper'),
        //thumb
        thumb = sshow.find('.thumnails'),
        //Get index
        indx = thumb.find('li').index(this),
        //Current index
        currentIndx = big.find('li').index(big.find('li:visible'));

    $this.siblings()
        .removeClass('active')
        .end().addClass('active');

    //If currentIndx is same as clicked indx don't do anything
    if (currentIndx == indx) {
        return;
    }

    big
    //Fadeout current image
    .find('li:visible').fadeOut(0).end()
    //Fadein new image
    .find('li:eq(' + indx + ')').fadeIn(0);
});