Carousel with different display duration for each item
How could I make a carousel with an element, with each element having a different display duration? Ex.: one (element) of 5 seconds; another of 8 seconds.
I managed to do with the Slick of the jQuery , but I can't stipulate how long each element is displayed. How can I do that?
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;
}
0
Author: Valdeir Psr, 2018-04-27
1 answers
You can create an object with different values for each slider element and call the callback beforeChange
(see documentation ) to change the duration (autoplaySpped
). Remembering that the name of each item of the object must end with the number in sequence of the indexes: 0, 1, 2...:
var speeds = {
// tempos em segundos
item0: 5,
item1: 8,
item2: 1,
item3: 5,
item4: 15,
item5: 1
}
Event calling 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 the autoplaySpeed
: speeds.item0*1000
.
The whole code gets 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>
1
Author: Sam, 2018-04-27 14:52:33