Question

我在标签内部有jquery光滑滑块，滑块不会计算布局，直到标签处于活动状态。

这是当前的光滑代码。

// 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的滑块，他的评论是

这是因为当旋转木马隐藏时，浮油无法正确计算其尺寸。

一种简单的方法是进入你的bootstrap css并使用   max-height：0px和max-height：auto而不是display：none和   显示：阻止。

另一种方式是，当显示标签时，调用   $（ '在传送带-这就是-得到示出的'）。得到（0）.slick.setPosition（）

我尝试在bootstrap之外更改css，对于类很重要但是max-height：auto会出现无效标记，并且无论如何都没有修复它。

Answer 1

仅对表单元素（input，textarea或select）的

Change事件。您需要将函数绑定到DOMSubtreeModified突变事件。

示例：

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

标签内的滑块，切换时需要设置光滑位置

1 个答案: