在折叠标签中加载时，光滑轮播的宽度为0px [英] Slick carousel has 0px width when loaded in collapsed tab

问题描述

在折叠的内容(本例中为Angular-bootstrap折叠插件)中加载平滑滑块时，.slick-track div的宽度为0px，导致该滑块试图将所有幻灯片放在一起.当按箭头查看下一张幻灯片时，这些幻灯片会恢复正常.如果我选择了滑块并想检查浏览器中的组件，它也会恢复正常.

When loading slick slider in collapsed content (angular-bootstrap collapse plugin in this case) the .slick-track div gets 0px width, resulting in the slider trying to fit all slides on top of eachother. When pressing arrow to see next slide, the slides go back to normal. If I select the slider and want to check the components in my browser, it also goes back to normal.

请参见以下示例: http://plnkr.co/edit/iw9f2alEnK0HFkv1eq16?p=preview

这是我正在使用的精巧配置:

This is the slick configuration I'm using:

$(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,
              }
            }]
    });
});

会有人知道如何解决这个问题吗?

Would anyone have an idea of how to solve this?

推荐答案

最后，我得到了光滑的创作者Ken Wheeler的回答.触发可折叠内容打开时，只需调用以下行:

Finally I got the answer by slick creator Ken Wheeler himself. When collapsable content is triggered open, simply call the following line:

$('.slider-class').slick('setPosition');

...并用滑块的类名称替换"slider-class".我个人用这条线创建了一个角度函数，并用ng-open触发了它.

...and replace "slider-class" with the class name of your slider. Personally I created an angular function with this line, and triggered it with ng-open.

这篇关于在折叠标签中加载时，光滑轮播的宽度为0px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！