[英]Slick carousel has 0px width when loaded in collapsed tab
当在折叠内容中加载光滑的滑块(在这种情况下为 angular-bootstrap 折叠插件)时,.slick-track div 的宽度为 0px,导致滑块试图将所有幻灯片放在彼此的顶部。 按箭头查看下一张幻灯片时,幻灯片将恢复正常。 如果我选择滑块并想在浏览器中检查组件,它也会恢复正常。
请看这个例子: http : //plnkr.co/edit/iw9f2alEnK0HFkv1eq16?p=preview
这是我正在使用的光滑配置:
$(document).ready(function(){
$('.tourImageSlider').slick({
dots: true,
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1500,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 1000,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}]
});
});
有没有人知道如何解决这个问题?
最后我得到了圆滑的创作者 Ken Wheeler 本人的回答。 当可折叠内容被触发打开时,只需调用以下行:
$('.slider-class').slick('setPosition');
...并将“滑块类”替换为滑块的类名。 我个人用这条线创建了一个角度函数,并用 ng-open 触发它。
与光滑轮播无法从具有 {display: none} 或小宽度(如 {width: 1px})的块中获得正确宽度的原因相关的问题。
当内容被样式隐藏时,通常会发生这种情况,如下例所示:
.product.data.items>.item.content~.content {
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
这个想法是使用 {overflow-y: hidden} 和 {height: 0} 来隐藏内容而不是 {display: none}。 并且标签激活后,需要为内容设置{height: auto;}。
// fix for slick carousel that initializes with zero width in collapsed tab
// it happens in tab with {display: none;} + small width like {width: 1px;}
.tab-content-selector {
width: 100%;
display: block !important; // if it set to display: none by script
overflow-y: hidden;
height: 0;
padding: 0 15px; // can be adjusted according to needs, but top and bottom padding must be zero
}
.tab-title-selector.active + .tab-content-selector {
height: auto;
padding: 10px 15px 30px; // can be adjusted according to needs
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.