JSFiddle - React, Tailwind, and code Playground

by Marc

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 class="big">
		<img src="http://placehold.it/472x224&text=first" width="472" height="224" alt="" />
        <img src="http://placehold.it/472x224&text=sec" width="472" height="224" alt="" />
		<img src="http://placehold.it/472x224&text=third" width="472" height="224" alt="" />
		<img src="http://placehold.it/472x224&text=four" width="472" height="224" alt="" />
		<img src="http://placehold.it/472x224&text=five" width="472" height="224" alt="" />
		<img src="http://placehold.it/472x224&text=six" width="472" height="224" 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" width="236" height="112" alt="" /></div></li>
        <li><div class="es-slide-inner"><img src="http://placehold.it/472x224&text=sec" width="236" height="112" alt="" /></div></li>
		<li><div class="es-slide-inner"><img src="http://placehold.it/472x224&text=third" width="236" height="112" alt="" /></div></li>
		<li><div class="es-slide-inner"><img src="http://placehold.it/472x224&text=four" width="236" height="112" alt="" /></div></li>
		<li><div class="es-slide-inner"><img src="http://placehold.it/472x224&text=five" width="236" height="112" alt="" /></div></li>
		<li><div class="es-slide-inner"><img src="http://placehold.it/472x224&text=six" width="236" height="112" alt="" /></div></li>
	</ul>
</div>

CSS

.big{width:472px; height:224px; margin:12px 0}

.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: opacity .5s;
	-moz-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
}

.es-default-template .es-image:hover img {
	opacity: 1;
}

.es-default-template .es-content...

JavaScript

$(function(){
  $(".big img:eq(0)").nextAll().hide();
  $(".es-slides .es-slide-inner img").click(function(e){
    var index = $(this).index();
    $(".big img").eq(index).show().siblings().hide();
  });    

  $('#basic_slider img').each(function(i,image){
    $(image).on('click', function(){
      $('.big').html('<img src=\''+ image.src + '\'/>');
    });
  });
});