加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular-bootstrap – 在折叠标签中加载时,光滑轮播的宽度为0px

发布时间:2020-12-17 06:51:06 所属栏目:安全 来源:网络整理
导读:在折叠内容中加载光滑滑块(在这种情况下为angular-bootstrap collapse插件)时,.slick-track div的宽度为0px,导致滑块尝试将所有幻灯片放在彼此的顶部.按箭头查看下一张幻灯片时,幻灯片恢复正常.如果我选择滑块并想要检查浏览器中的组件,它也会恢复正常. 请看
在折叠内容中加载光滑滑块(在这种情况下为angular-bootstrap collapse插件)时,.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,}
            },{
              breakpoint: 1000,settings: {
                slidesToShow: 1,}
            }]
    });
});

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

解决方法

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

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

…并将“slider-class”替换为滑块的类名.我个人用这条线创建了一个角度函数,并用ng-open触发它.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读