jQuery 光滑的轮播不会调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38755238/
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 won't resize
提问by Gabriel Bonifacio
I'm using Slick.js carousel on a Wordpress site I'm developing. When I resize the browser window, the carousels won't fit it, causing horizontal scrollbars to show up. If I don't initiate Slick, the images resize accordingly, as you would expect in a fluid layout.
我正在开发的 Wordpress 网站上使用 Slick.js carousel。当我调整浏览器窗口的大小时，轮播将不适合它，导致水平滚动条出现。如果我不启动 Slick，图像会相应地调整大小，正如您在流体布局中所期望的那样。
Slick injects some inline styles dynamically, and one of them is the width. You can see the width accross all child divs of the carousel: Slick inline styles
Slick 动态注入了一些内联样式，其中之一就是宽度。您可以看到轮播的所有子 div 的宽度： 光滑的内联样式
Slick's normal behavior is to update those widths as you resize the window, but for some reason it won't happen on this site.
Slick 的正常行为是在您调整窗口大小时更新这些宽度，但由于某种原因，它不会在此站点上发生。
Here is the link to the website: http://smart.trippple.com.br/
这是网站的链接：http: //smart.trippple.com.br/
The home page has two carousels, located at these positions:
主页有两个轮播，位于以下位置：
- main #slider-home .container .slider-session
- main #seguradoras .container #seguradoras-carrousel .slider-session
- main #slider-home .container .slider-session
- 主要#seguradoras .container #seguradoras-carrousel .slider-session
This is how I'm initiating the script:
这就是我启动脚本的方式：
$('#slider-home .slider-session').slick({
autoplay: true,
autoplaySpeed: 5000,
arrows: false,
fade: true,
slidesToScroll: 1,
slidesToShow: 1,
speed: 1000
});
$('#seguradoras-carrousel .slider-session').slick({
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
centerMode: true,
mobileFirst: true,
pauseOnHover: false,
slidesToShow: 4
});
And here is everything I tried so far:
这是我迄今为止尝试过的所有内容：
- Deactivated all scripts except for jQuery and Slick to make sure there isn't a conflict taking place;
- Tested different versions of jQuery;
- Tried including jQuery Migrate;
- Tried to load jQuery + Slick in the site's header;
- Tried to remove the carousels from the container;
- Tried to set a width and max-width to the carousel div on my stylesheet;
Tried to use Slick's resize method:
$(window).resize(function() { $('#slider-home .slider-session').slick('resize'); });
Researching everywhere and even opening an issue on the plugin's Github page. The plugin author replied that the script definitely resizes and the problem is in my environment, and he is right. I created a static HTML page to test, and the carousel was 100% responsive. There is something on this website which is preventing the script's normal behavior.
- 停用除 jQuery 和 Slick 之外的所有脚本以确保不会发生冲突；
- 测试了不同版本的jQuery；
- 尝试包括 jQuery Migrate；
- 尝试在站点的标题中加载 jQuery + Slick；
- 试图从容器中取出转盘；
- 试图在我的样式表上为轮播 div 设置宽度和最大宽度；
尝试使用 Slick 的调整大小方法：
$(window).resize(function() { $('#slider-home .slider-session').slick('resize'); });
到处研究，甚至在插件的 Github 页面上打开一个问题。插件作者回答说脚本肯定会调整大小，问题出在我的环境中，他是对的。我创建了一个静态 HTML 页面进行测试，轮播是 100% 响应。该网站上的某些内容阻止了脚本的正常行为。
By the way, you won't see Slick's stylesheets linked because I embedded them into the site's main stylesheet.
顺便说一下，您不会看到链接的 Slick 的样式表，因为我将它们嵌入到站点的主样式表中。
Any help is really appreciated! I'm trying to solve this for about two weeks, at least, and I don't know what else to try. Any ideas are welcome. Thank you!
任何帮助真的很感激！我至少要解决这个问题大约两周，但我不知道还能尝试什么。欢迎任何想法。谢谢！
回答by cup_of
have you tried slicks responsive option? i dont know if this is the answer you are looking for but that is what i do to make my slider work based on browser resize.
您是否尝试过 slicks 响应式选项？我不知道这是否是您正在寻找的答案，但这就是我根据浏览器调整大小使滑块工作的方法。
$('#seguradoras-carrousel .slider-session').slick({
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
centerMode: true,
mobileFirst: true,
pauseOnHover: false,
slidesToShow: 4,
//start responsive option
responsive: [
{
breakpoint: 600, //at 600px wide, only 2 slides will show
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480, //at 480px wide, only one slide will show
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
Updated to work on resize instead of refresh
更新以处理调整大小而不是刷新
you need two functions, a resize function and a slick function
你需要两个函数，一个调整大小的函数和一个光滑的函数
jQuery(window).on('resize', function() {
clearTimeout(resizeTimerInternal)
resizeTimerInternal = setTimeout(function() {
//add functions here to fire on resize
slickSliderWithResize();
}, 100)
});
function slickSliderWithResize() {
if (jQuery(window).width() < 1150) {
if(jQuery('.slick-slider-wrapper').hasClass('slick-initialized')) {
}
else {
jQuery('.slick-slider-wrapper').slick({
// slick options
});
}
} else {
if(jQuery('.slick-slider-wrapper').hasClass('slick-initialized')) {
jQuery('.slick-slider-wrapper').slick("unslick");
}
}
}
slickSliderWithResize();
this should work on resize, but you need to edit it a bit to fit your slider. the name of the slider container (i just named it slick-slider-wrapper), the slick options, and which size to have it break down (i have it set at less than 1150px)
这应该适用于调整大小，但您需要对其进行一些编辑以适合您的滑块。滑块容器的名称（我只是将其命名为 slick-slider-wrapper）、slick 选项以及分解的大小（我将其设置为小于 1150px）
回答by mdob
In my case I was actually missing image stretching
就我而言，我实际上缺少图像拉伸
.slick-slide img {width: 100%;}
回答by laviku
I recently had the same problem and this is how I solved it. On the resize or orientation change event of window, destroy the slick and create it again.
我最近遇到了同样的问题，这就是我解决它的方法。在窗口的调整大小或方向更改事件中，销毁光滑并重新创建它。
var slickOptions = {
arrows: false,
dots: true,
adaptiveHeight: true,
mobileFirst: true
};
$('.slick-element').slick(slickOptions);
$(window).on('resize orientationchange', function() {
$('.slick-element').slick('unslick');
$('.slick-element').slick(slickOptions);
});
回答by VALLEE David
$('#slick-slider').slick('setDimensions');
Works for me after resized or after show a hidden slider.
调整大小或显示隐藏滑块后对我有用。
This method is not available in the official documentation.
官方文档中没有这个方法。
回答by technico
Maybe if you force slick to resize on window resize this would fit :
也许如果你强制 slick 在窗口调整大小时调整大小，这将适合：
$(window).resize(function() {
$('#slider-home .slider-session').slick('resize');
$('#seguradoras-carrousel .slider-session').slick('resize');
});
回答by Letícia Gomes
$('#slick-slider').slick('setDimensions');
$('#slick-slider').slick('setDimensions');
with $('#slick-slider').slick('setPosition');
与 $('#slick-slider').slick('setPosition');
Works for me
为我工作
