JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.esensdev2.nl/x/js/jquery.mousewheel.js"></script>
<script src="http://www.esensdev2.nl/x/js/jquery.easing.1.3.js"></script>
<script src="http://www.esensdev2.nl/x/js/jquery.everslider.min.js"></script>
<script src="http://www.esensdev2.nl/x/js/custom.js"></script>
<div id="preload">
    <img src="http://placehold.it/472x224&text=first-large" />
    <img src="http://placehold.it/472x224&text=second-large" />
    <img src="http://placehold.it/472x224&text=third-large" />
    <img src="http://placehold.it/472x224&text=fourth-large" />
    <img src="http://placehold.it/472x224&text=fifth-large" />
    <img src="http://placehold.it/472x224&text=sixth-large" />
</div>
<div id="big">
    <img src="http://placehold.it/472x224&text=six" alt="" />
</div>
<div id="basic_slider" class="everslider es-basic-template">
    <ul class="es-slides">
        <li>
            <div class="es-slide-inner">
                <img src="http://placehold.it/472x224&text=first" data-large="http://placehold.it/472x224&text=first-large" />
            </div>
        </li>
        <li>
            <div class="es-slide-inner">
                <img src="http://placehold.it/472x224&text=second" data-large="http://placehold.it/472x224&text=second-large" />
            </div>
        </li>
        <li>
            <div class="es-slide-inner">
                <img src="http://placehold.it/472x224&text=third" data-large="http://placehold.it/472x224&text=third-large" />
            </div>
        </li>
        <li>
            <div class="es-slide-inner">
                <img src="http://placehold.it/472x224&text=fourth" data-large="http://placehold.it/472x224&text=fourth-large" />
            </div>
        </li>
        <li>
            <div class="es-slide-inner">
                <img src="http://placehold.it/472x224&text=fifth" data-large="http://placehold.it/472x224&text=fifth-large" />
            </div>
        </li>
        <li>
            <div class="es-slide-inner">
  ...

CSS

#preload {
    display: none;
}
#big {
    width:100%;
    height:auto;
    margin:12px 0;
    position:relative
}
#big img {
    width: 100%;
    height: auto;
}
.everslider {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 0 20px;
}
.everslider .es-slides {
    position: relative;
    width: 100000px;
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-transform: translate3d(0, 0, 0);
}
.everslider .es-slides > li {
    position: relative;
    float: left;
    padding: 0!important;
    border: 0!important;
    width: 500px;
    height: 300px;
    margin: 0 10px 0 0;
    -webkit-transform: translate3d(0, 0, 0);
}
.everslider.es-swipe-grab .es-slides > li {
}
.everslider .es-slides img {
    width: 100%;
    height: auto;
    max-width: none;
}
/* Preload */
 .everslider {
    background: url(images/preload.gif) no-repeat center;
}
.everslider.es-slides-ready {
    background: none;
}
.es-slides {
    visibility: hidden;
}
.es-slides-ready .es-slides {
    visibility: visible;
}
/* Navigation */
 .es-navigation a {
    position: absolute;
    top: 50%;
    margin-top: -12px;
    padding: 0px;
}
.es-navigation .es-prev {
    left: 0
}
.es-navigation .es-next {
    right: 0
}
.es-navigation .es-first, .es-navigation .es-last {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: default;
}
.es-navigation a span {
    display: block;
    width: 24px;
    height: 24px;
    text-indent: -9999px;
    background:#fff;
}
.es-default-template.es-has-navigation, .es-default-template.es-has-pagination, .es-default-template.es-has-ticker {
    padding-top: 40px;
}
.es-default-template.es-has-pagination {
    margin-top: -20px;
}
.es-default-template .es-slides > li {
    width: 200px;
    height: auto!important;
    margin-right: 15px;
}
.es-default-template .es-slide-inner {
    overflow: hidden;
}
.es-default-template .es-image img {
    opacity: 1;
    border-radius: 0;
    vertical-align: top;
    -webkit-transition:...

JavaScript

$(function () {
    $('#basic_slider img').on('click', function () {
        var _this = $(this);
        var oldImage = $('#big img');
        var newImage = $('<img>').attr({
            'src': _this.data('large')
        }).css({
            'position': 'absolute',
                'left': '0',
                'top': '0',
                'display': 'none'
        });
        $('#big').append(newImage);
        newImage.fadeIn('slow', function () {
            newImage.css({
                'position': '',
                    'left': '',
                    'top': ''
            });
            oldImage.remove();
        });
    });
});