JSFiddle - React, Tailwind, and code Playground

by BandonRandon

HTML

<script src="//cdn.jsdelivr.net/flexslider/2.1/jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/flexslider/2.1/flexslider.css">
<div class="flexslider">
  <ul class="slides">
    <li data-thumb="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg">
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
    </li>
          <li data-thumb="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg">
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
    </li>
 </ul>
</div>

JavaScript

// Can also be used with $(document).ready()

  $('.flexslider').flexslider({
    animation: "slide",
   controlNav: "thumbnails",
      animationLoop: true,
   // itemWidth: 210
    itemMargin: 5,
    minItems: 1,
    maxItems: 4,
    slideshowSpeed: 2000,
     		pauseOnHover: true
  });