选项卡内的滑块，切换时需要设置光滑位置

Question

我在标签内有 jquery slick 滑块，在标签处于活动状态之前，滑块不会计算布局。

这是当前的 slick 代码。

// JavaScript Document


jQuery(document).on('ready', function() {


  jQuery(".slider").slick({ asNavFor: '.slider',
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 3,
  responsive: [
         {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    },
  ]

  });
 jQuery(document).bind('DOMSubtreeModified', function () {
        $('.panel-collapse first-toggle collapse in').get(0).slick.setPosition();         
  });
}); 

这里是html输出页面my html output page

如果您单击标有可选封面的选项卡，则浮油会在一侧被压扁。

我在 Ken Wheelers reddit 上查看了滑块，他的 cmets 是

这是因为当轮播被隐藏时，slick 无法正确计算其尺寸。

一个简单的修复方法是进入你的引导 css 并使用 max-height: 0px 和 max-height: auto 而不是 display: none 和 显示：块。

另一种方式，当标签显示时，调用 $('.the-carousel-thats-getting-shown').get(0).slick.setPosition()

我尝试使用 !important 为类更改引导程序之外的 css，但 max-height:auto 出现无效标记，并且无论如何都没有修复它。

Answer 1

Change 事件仅适用于表单元素（输入、文本区域或选择）。您需要将函数绑定到 DOMSubtreeModified 突变事件。

例子：

  $(document).bind('DOMSubtreeModified', function () {
    $('.panel-collapse.collapse.first-toggle.in').get(0).slick.setPosition();         
  });