光滑的旋转木马有0px的宽度,当加载在折叠标签
Slick carousel has 0px width when loaded in collapsed tab
当在折叠内容中加载滑块时(在本例中是angular-bootstrap折叠插件),.slick-trackdiv的宽度为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');
…用你的滑块的类名替换"slider-class"。我个人用这一行创建了一个角函数,并使用ng-open.
关于slick carousel无法从{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
}
相关文章:
- 如何在页面加载时折叠手风琴样式的特定部分
- 默认情况下,jQuery 折叠项应在页面加载时折叠
- Jquery手风琴在页面加载时折叠
- 排序元素折叠和内容重新加载
- google pageSpeed Insights,javascript IS 在 WORDPRESS 折叠下方加载
- 加载部分视图时引导折叠无法正常工作
- 加载网页后,在树视图中如何显示子/节点的展开和折叠
- 如何在页面加载上折叠展开的行
- jQuery 折叠按钮不加载远程内容
- 加载时自动切换展开/折叠箭头
- 页面重新加载后保持折叠和展开状态
- 强制可折叠布局中的分布式 json 加载
- 如何使用页面重新加载时打开和关闭状态的唯一id修改引导折叠
- jqGrid Treegrid在动态加载数据后不展开和折叠行
- 光滑的旋转木马有0px的宽度,当加载在折叠标签
- 具有动态加载内容的可折叠列表
- 检测& # 39;折叠# 39;在浏览器中不加载网页的情况下
- jquery手风琴在页面加载时默认折叠
- Angular Ui引导折叠页面加载时闪烁
- Jquery函数slide需要在页面加载时折叠(没有编码经验,但在绑定!)