Question

我尝试通过这种jsFiddle

尽可能地重现这种情况

<div class='container'>
  <div class='single-item'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
</div>
<button class='pause'>
  <div>►</div>
</button>

 $(".single-item").on("init", function() {
    let button = $('button.pause');
  let dots = $('.slick-dots');

  button.appendTo(dots);
 });

 $(".single-item").slick({
      dots: true,
      adaptiveHeight: true,
      speed: 300,
      slidesToShow: 1,
      slidesToScroll: 1,
      pauseOnDotsHover: true//, // take comments out from  comma out and below 
     //  responsive: [
     //    {
     //      breakpoint: 1024,
     //      settings: {
    //         arrows: false
     //      }               
     //    }
    //   ]       
  });

发生的是，当击打浮点设置中的响应断点时，似乎重新创建了浮点，失去了其子控件。

在我正在研究的网站上，从台式机到平板电脑，反之亦然。请注意，从平板电脑转到移动设备，播放按钮仍然是浮点子，但是越过该断点似乎会破坏并重新创建浮点。

我调查了一些事件，但是它们似乎没有帮助

reInit-不触发
断点-似乎在创建控件后不一致触发
setPosition-似乎会在所有屏幕移动和幻灯片移动上触发

有没有一种方法可以捕获浮点的重新创建，以便可以附加自定义按钮？

Slick Carousel-响应式更改后，子控件消失

0 个答案: