JSFiddle - React, Tailwind, and code Playground

by crazzzy

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.0/flexslider-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.0/flexslider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.0/jquery.flexslider.js"></script>
<div class="flexslider">
   <ul class="slides">
      <li data-duration="100">
         <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Burger_King_Restaurant_in_Sherman_Oaks%2C_California_-_panoramio.jpg" />
      </li>
      <li data-duration="500">
         <img src="https://upload.wikimedia.org/wikipedia/commons/a/ae/Canoga_Park%2C_California_-_panoramio.jpg" />
      </li>
      <li data-duration="5000">
         <img src="https://upload.wikimedia.org/wikipedia/commons/c/cd/CHS_Building.JPG" />
      </li>
      <li data-duration="1000">
         <img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/First_Street_Bridge._Downtown_Los_Angeles%2C_CA._Looking_West._-_panoramio.jpg" />
      </li>
   </ul>
</div>

JavaScript

$(document).ready(function() {
   var slider = $('.flexslider').flexslider({
      slideshowSpeed: 6000,
      directionNav: true,
      slideshow: 1,
      animation: 'fade',
      animationLoop: true,
      after: function(slider) {
         slider.stop();
         slider.vars.slideshowSpeed = $(slider.slides[slider.currentSlide]).data('duration');
         slider.play();
      }
   });
});