Javascript 圆滑的轮播响应断点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31669086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick carousel responsive breakpoints
提问by void
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.
除了一件事之外，它的工作方式是它假定的工作方式，当我将浏览器窗口的大小从 1920 宽度调整为 800 宽度时，轮播不光滑并且内容显示为正常 div，但是当我增加浏览器窗口的宽度时轮播不会重新创建。它仍然像没有轮播的 HTML div 块。
Any help would be appreciated.
任何帮助，将不胜感激。
采纳答案by Peter Wong
unslick is a destructor method. Once you unslick, you need to call slick() again to construct carousel.
unslick 是一种析构方法。一旦你 unslick，你需要再次调用 slick() 来构造 carousel。
回答by Beck Johnson
This is one way to rebuild the carousel after unslick kills it at a breakpoint:
这是在 unslick 在断点处杀死轮播后重建轮播的一种方法：
$(window).resize(function () {
$('.js-slider').not('.slick-initialized').slick('resize');
});
$(window).on('orientationchange', function () {
$('.js-slider').not('.slick-initialized').slick('resize');
});
回答by Mato
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).
在每个浏览器调整大小事件中，您需要检查并在需要时重新初始化 Slick 滑块（如果您使用的是移动设备且 Slick 滑块未初始化）。
/* 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');
回答by ??????? ????????
<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
}
}
]
});
});
