How can a flexslider have a different pause time for each individual slide?

Question

JavaScript

How can I make the flexslider have a different pause time for each individual slide?

Answer 1

Found this solution:

<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>

$(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();
      }
   });
});

https://jsfiddle.net/crazzy/xs67kv18

Answer 2

I don’t know about flexslider, but slick definitely has methods for flipping, which means you can put the timer into an array. something like this: https://jsfiddle.net/jvxm0shs/