This is the configuration I am using to create slick carousel on my web page.
$('#carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 1008,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 800,
settings: "unslick"
}
]
});
It is working the way it is suppose to work except for one thing, When i resize my browser window from 1920 width to 800 width, the carousel unslicks and the content is displayed like normal div's, but then when I increase the width of browser window the carousel doesn't recreates. It remains like HTML div blocks without carousel.
Any help would be appreciated.
unslick is a destructor method. Once you unslick, you need to call slick() again to construct carousel.
This is one way to rebuild the carousel after unslick kills it at a breakpoint:
$(window).resize(function () {
$('.js-slider').not('.slick-initialized').slick('resize');
});
$(window).on('orientationchange', function () {
$('.js-slider').not('.slick-initialized').slick('resize');
});
<section class="regular slider" style="direction:ltr">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
<div>
<img src="http://placehold.it/350x300?text=10">
</div>
<div>
<img src="http://placehold.it/350x300?text=11">
</div>
<div>
<img src="http://placehold.it/350x300?text=12">
</div>
<div>
<img src="http://placehold.it/350x300?text=13">
</div>
<div>
<img src="http://placehold.it/350x300?text=14">
</div>
</section>
/////script/////
$(document).on('ready', function() {
$(".regular").slick({
dots: false,
infinite: true,
slidesToShow: 6,
slidesToScroll: 6,
autoplay: true,
autoplaySpeed: 2000,
pauseOnHover: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 5,
slidesToScroll: 5,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
]
});
});
On each browser resize event you need to do a check and reinitialize the Slick slider if needed (if you are on mobile and Slick slider is not initialized).
/* Get element */
var slider = $('.slider');
/* Slider settings */
var settings = {...}
/* Do this every time window gets resized */
$(window).on('resize', function() {
/* If we are above mobile breakpoint unslick the slider */
if ($(window).width() >= 800)
{
/* Do this only if slider is initialized */
if (slider.hasClass('slick-initialized')) {
slider.slick('unslick');
}
return;
}
/* We are below mobile breakpoint, initialize the slider
if it is not already initialized */
else if (!slider.hasClass('slick-initialized'))
{
return slider.slick(settings);
}
});
$(window).trigger('resize');
I solved the responsive breakpoint issue, recalculating the number of slides at any browser resize.
.testimonialsList : it's the name of the container of my carousel.
// Create carousel
function createTestimonialCarousel(numberOfSlides){
jQuery('.testimonialsList').not('.slick-initialized').slick({
dots: true,
arrows: true,
infinite: true,
slidesToShow: numberOfSlides,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 6000,
pauseOnHover: true
});
}
// Calculate number of slides to show
function calculateNumberOfSlidesToShow(){
var carouselWidth = jQuery(".testimonialsList").width();
var numberOfSlides = 0;
switch (true) {
case (carouselWidth < 767):
numberOfSlides = 1;
break;
case (carouselWidth < 991):
numberOfSlides = 2;
break;
case (carouselWidth < 1199):
numberOfSlides = 3;
break;
case (carouselWidth > 1200):
numberOfSlides = 3;
break;
}
return numberOfSlides;
}
// Reload Carousel on browser resize (to make it responsible)
function reloadCarousel () {
jQuery('.testimonialsList').slick('unslick');
numberOfSlides = calculateNumberOfSlidesToShow();
createTestimonialCarousel(numberOfSlides);
}
// Call updateMaxHeight when browser resize event fires
jQuery(window).on("resize", reloadCarousel);
jQuery(document).ready(function () {
// Initialize the carousel
if (jQuery(".testimonialsList").length) {
setTimeout(function () {
numberOfSlides = calculateNumberOfSlidesToShow();
createTestimonialCarousel(numberOfSlides);
}, 300);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.