JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<script src="https://github.com/woothemes/FlexSlider/raw/develop/jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="https://github.com/woothemes/FlexSlider/raw/develop/flexslider.css">
<section class="slider">
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
              <img src="http://placehold.it/800x504&text=1" />
            </li>
<li>
              <img src="http://placehold.it/800x504&text=2" />
            </li>
<li>
              <img src="http://placehold.it/800x504&text=3" />
            </li>
<li>
              <img src="http://placehold.it/800x504&text=4" />
            </li>
<li>
              <img src="http://placehold.it/800x504&text=5" />
            </li>
<li>
              <img src="http://placehold.it/800x504&text=6" />
            </li>
<li>
              <img src="http://placehold.it/800x504&text=7" />
            </li>
<li>
              <img src="http://placehold.it/800x504&text=8" />
            </li>
<li>
              <img src="http://placehold.it/800x504&text=9" />
            </li>
<li>
              <img src="http://placehold.it/800x504&text=10" />
            </li>
<li>
              <img src="http://placehold.it/800x504&text=11" />
            </li>
<li>
              <img src="http://placehold.it/800x504&text=12" />
            </li>
</ul></div>
<div id="slider" class="flexslider">
<ul class="slides">
<li>
  	    	    <img src="http://placehold.it/800x504&text=1" />
  	    		</li>
<li>
  	    	    <img src="http://placehold.it/800x504&text=2" />
  	    		</li>
<li>
  	    	    <img src="http://placehold.it/800x504&text=3" />
  	    		</li>
<li>
  	    	    <img src="http://placehold.it/800x504&text=4" />
  	    		</li>
<li>
  	    	    <img src="http://placehold.it/800x504&text=5" />
  	    		</li>
<li>
  	    	    <img src="http://placehold.it/800x504&text=6" />
  	    		</li>
<li>
  	    	    <img src="http://placehold.it/800x504&text=7" />
  	    		</li>
<li>
  	    	    <img...

CSS

#slider ul,
#carousel ul,
#slider li,
#carousel li{
	list-style: none;
	margin: 0;
	padding: 0;
}
#carousel li {margin-right: 7px;}
#carousel img {display: block; opacity: .5; cursor: pointer;}
#carousel img:hover {opacity: 1;}
#carousel .flex-active-slide img {opacity: 1; cursor: default;}

JavaScript

$(window).load(function(){
	$('#carousel').flexslider({
		animation: "slide",
		controlNav: false,
		directionNav: false,
		itemWidth: 96,
		itemMargin: 7,
		asNavFor: '#slider',
		useCSS: false,
		slideshow: false
	});

	$('#slider').flexslider({
		animation: "slide",
		sync: "#carousel",
		animationLoop: false
	});
});