Carousel with different display duration for each item

Question

How could I make a Carousel with an element, each element will have a different display duration? Ex.: One (element) of 5 seconds; other 8 seconds.

I managed to do with the Slick of jQuery, however I cannot stipulate the time each element is displayed. How can I do this?

HTML

<div class='container_banner'>
  <div class='single-item'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>


  <div class='single-item2'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
</div>

Javascript

$(".single-item").slick({
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
   autoplay: true,
});
$(".single-item2").slick({
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
   autoplay: true,
});

CSS

.container_banner {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

https://jsfiddle.net/b5bqk68j/3804/

Answer 1

You can create an object with different values for each element of the slider and call the callback beforeChange (see documentation) to change the duration (autoplaySpped). Remember that the name of each item of the object must end with the number in sequence of the index: 0, 1, 2...:

var speeds = {
   // tempos em segundos
   item0: 5,
   item1: 8,
   item2: 1,
   item3: 5,
   item4: 15,
   item5: 1
}

Event that calls the method:

$('.single-item').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  slick.options.autoplaySpeed = speeds['item'+nextSlide]*1000;
});

In the options of each slider, you put in the autoplaySpeed: speeds.item0*1000.

The whole code goes like this:

$(document).ready(function(){
   
   var speeds = {
      // tempos em segundos
      item0: 5,
      item1: 8,
      item2: 1,
      item3: 5,
      item4: 15,
      item5: 1
   }

   $('[class^="single-item"]').on('beforeChange', function(event, slick, currentSlide, nextSlide){
     slick.options.autoplaySpeed = speeds['item'+nextSlide]*1000;
   });

   $(".single-item").slick({
     dots: true,
     infinite: true,
     speed: 500,
     autoplaySpeed: speeds.item0*1000,
     slidesToShow: 1,
     slidesToScroll: 1,
      autoplay: true,
   });
   $(".single-item2").slick({
     dots: true,
     infinite: true,
     speed: 500,
     autoplaySpeed: speeds.item0*1000,
     slidesToShow: 1,
     slidesToScroll: 1,
      autoplay: true,
   });
   
});

.container_banner {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class='container_banner'>
  <div class='single-item'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>


  <div class='single-item2'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
</div>