JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<div class="slideshow">
    <ul class='big'>
        <li>
            <img src="http://imageshack.us/a/img845/6999/ut3b.jpg" />
        </li>
        <li>
            <img src="http://imageshack.us/a/img850/1646/pu9p.jpg" />
        </li>
        <li>
            <img src="http://imageshack.us/a/img22/4640/6a5q.jpg" />
        </li>
        <li>
            <img src="http://imageshack.us/a/img513/4973/h6g3.jpg" />
        </li>
    </ul>
    <ul class='controls'>
        <li class='prev'>&lt;</li>
        <li class='next'>&gt;</li>
    </ul>
    <ul class='thumb'>
        <li>
            <img src="http://imageshack.us/a/img845/6999/ut3b.jpg" />
        </li>
        <li>
            <img src="http://imageshack.us/a/img850/1646/pu9p.jpg" />
        </li>
        <li>
            <img src="http://imageshack.us/a/img22/4640/6a5q.jpg" />
        </li>
        <li>
            <img src="http://imageshack.us/a/img513/4973/h6g3.jpg" />
        </li>
    </ul>
</div>

CSS

.slideshow .big, .slideshow .controls, .slideshow .thumb {
    list-style-type : none;
    position : relative;
    margin : 0;
    padding : 0;
    width : 480px;
}
.slideshow .big li {
    position : absolute;
    top : 0;
    left : 0;
    display : none;
}
.slideshow .big li:first-child {
    display : block;
}
.slideshow .big img, .slideshow .big {
    width : 480px;
    height : 360px;
}
.slideshow .controls {
    position : absolute;
    top : 160px;
}
.slideshow .controls li {
    width : 40px;
    height : 40px;
    background-color : #666;
    opacity : .2;
    color : #ccc;
    float : left;
    font-size : 24px;
    text-align : center;
    line-height : 40px;
    cursor : pointer;
}
.slideshow .controls li:hover {
    opacity : 1;
}
.slideshow .controls .next {
    float : right;
}
.slideshow .thumb img {
    width : 120px;
}
.slideshow .thumb li {
    float : left;
    cursor : pointer;
}
.slideshow .thumb li:hover {
    opacity : .8;
}

JavaScript

//When we click on thumb img
$('.thumb li', '.slideshow').click(function() {
    
    var
        //SlideShow
        sshow = $(this).closest('.slideshow'),
        //Big
        big = sshow.find('.big'),
        //thumb
        thumb = sshow.find('.thumb'),
        //Get index
        indx = thumb.find('li').index(this),
        //Current index
        currentIndx = big.find('li').index(big.find('li:visible'));
    
    //If currentIndx is same as clicked indx don't do anything
    if(currentIndx == indx) {
        return;
    }
    
    big
        //Fadeout current image
        .find('li:visible').fadeOut().end()
        //Fadein new image
        .find('li:eq(' + indx + ')').fadeIn();
});

//When we click on any li inside controls section
$('.controls li').click(function() {
    var
        //Slideshow
        sshow = $(this).closest('.slideshow'),
        //Increment
        incr = $(this).hasClass('prev') ? -1 : 1,
        //Current Index
        currentIndx = sshow.find('.big li').index(sshow.find('.big li:visible')),
        //Final Index
        finalIndx = currentIndx + incr;
    
    //Check ranges
    finalIndx = (finalIndx >= 4) ? 0 : ( (finalIndx < 0) ? 3 : finalIndx);
    
    //Now trigger click event on respective image in nav
    sshow.find('.thumb li:eq(' + finalIndx + ')').trigger('click');
});