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

滑动滑块克隆一些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

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

1 个答案: