JSFiddle - React, Tailwind, and code Playground

HTML

<div class="advertise clearfix">
    <div class="large-photo">
        <div class="large active">1</div>
        <div class="large">2</div>
        <div class="large">3</div>
        <div class="large">4</div>
        <div class="large">5</div>
        <div class="large">6</div>
        <div class="large">7</div>
        <div class="large">8</div>
        <div class="left-arrow pull-left">left</div>
        <div class="right-arrow pull-right">right</div>
    </div>
    <div class="small-photo">
        <div class="small selected">1</div>
        <div class="small">2</div>
        <div class="small">3</div>
        <div class="small">4</div>
        <div class="small">5</div>
        <div class="small">6</div>
        <div class="small">7</div>
        <div class="small">8</div>
    </div>
</div>

CSS

.advertise {
    height:250px;
    margin:30px auto;
    overflow:hidden;
    position:relative;
}
.large-photo {
    overflow: hidden;
    text-align:center;
    width:860px;
    height:100%;
    float:left;
    position:relative;
}
.large-photo .large {
    display: none;
    max-width: 100%;
    width:860px;
    font-size:20pt;
}
.large-photo .large.active {
    /*display: block;*/
    border:1px solid #fe5113;
    color:#fe5113 !important;
    width:858px;
    height:247px;
}
.small-photo .small.selected {
    border:1px solid #fe5113;
    color:#fe5113 !important;
}
.small-photo {
    background-color:#fff;
    border: 1px solid #ddd;
    float:right;
    width:300px;
    height:247px;
    overflow-y:scroll;
}
.small-photo .small {
    float:left;
    width:140px;
    height:80px;
    overflow: hidden;
    padding: 5px;
    color:#000;
    border:1px solid #000;
}
.large-photo .large img, .small-photo .small img {
    max-width:100%;
    height:100%;
}
div.left-arrow, div.right-arrow {
    background-color:#000;
    border-radius: 100%;
    color: #fff;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 30px;
    position:absolute;
    top:50%;
}
div.left-arrow {
    left: 0;
}
div.right-arrow {
    right: 0;
}

JavaScript

var currentIndex = 0;

$(".small-photo .small").click(function () {
    $('.selected').removeClass('selected');
    var index = currentIndex = $(this).index();
    showImage(index);
});
$(".left-arrow").on('click', function () {
    $('.selected').removeClass('selected');
    currentIndex = currentIndex == 0 ? $(".small").length - 1 : --currentIndex;
    showImage(currentIndex);
});
$(".right-arrow").on('click', function () {
    $('.selected').removeClass('selected');
    currentIndex = currentIndex == $(".small").length - 1 ? 0 : ++currentIndex;
    showImage(currentIndex);
});

function showImage(index) {
    $(".large-photo .large.active").hide('slide', {
        direction: 'right'
    }, 500);
    // $(".large-photo .large.active").removeClass('active');

    $(".large-photo .large").eq(index).show('slide', {
        direction: 'left'
    }, 500);
    $(".large-photo .large").eq(index).addClass('active');
    $(".small-photo .small").eq(index).addClass('selected');
    $(this).addClass('selected');
    // $(".large-photo .large.active").effect("slide", {}, 500);
}

    // callback function to bring a hidden box back
    function callback() {
      setTimeout(function() {
        $( this ).removeClass('active');
      }, 1000 );
    };

$(function () {
    showImage(0);
});