jquery - 如何让 jQuery Zoom 与 Slick Slider 一起使用？

Question

我正在使用 jQuery Zoom 为我的 Slick Slider 添加缩放功能: https://github.com/jackmoore/zoom

这在大多数情况下工作正常，但不幸的是总是有一张幻灯片(克隆幻灯片)无法缩放。我创建了一个 Codepen 来重现该问题:

https://codepen.io/joostplas/pen/yKVeOx?q=slickslider&order=popularity&depth=everything&show_forks=false

 <div><img class="image-zoom" src="//cdn.shopify.com/s/files/1/2550/5316/products/sweaterwhitebycossac_front1_1440x.jpg?v=1520864793"/></div>
            <div><img class="image-zoom" src="//cdn.shopify.com/s/files/1/2550/5316/products/sweaterwhitebycossac_side_1440x.jpg?v=1520864793"/></div>
            <div><img class="image-zoom" src="//cdn.shopify.com/s/files/1/2550/5316/products/sweaterwhitebycossac_back_1440x.jpg?v=1520864793"/></div>

我认为这是 Slick 和 Zoom 之间的一些冲突，但我不知道如何调试。有什么建议可以给我吗？

Answer 1

Slick slider 克隆了一些HTML节点以实现无限滑动，因此Zoom Plugin使用的事件不会附加到Slick新克隆的节点上

更换光滑幻灯片后，您必须终止 Zoom 插件并重新初始化它。

试试这个js:

$('.images').on('click', function() {
  $('.lazy').slick({
    slidesToShow: 2,
    slidesToScroll: 1
  });
});

$(document).ready(function(){
  initZoom()
});

function initZoom() {
    $('.image-zoom')
      .zoom({
      url: $(this).find('img').attr('data-zoom')
    });  
}

$('.lazy').on('afterChange', function() {
  $('.image-zoom').trigger('zoom.destroy');
  initZoom()
});

Here is your codepen updated