Carousel with different display duration for each item

Navigation
0

How can I make a carousel with an element, each element having a different display duration? Example: One (element) of 5 seconds; another 8 seconds.

I've been able to do with Slick of jQuery , but I can not stipulate how long 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;
}

link

    
asked by anonymous 27.04.2018 / 05:25

1 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 (% with%). Remember that the name of each item of the object must end with the sequence number of the indexes: 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 autoplaySpped : autoplaySpeed .

The whole code looks 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><linkrel="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>
    
27.04.2018 / 16:31
What linux command is used to find out who is the parent of a process? [closed] Save current date -X days in a variable