添加图片导致slick轮播功能失效

Question

我正在使用Slick Carousel在我的网站上显示图片。然而，当使用slickAdd方法时，我遇到了一个奇怪的问题。

使用此方法似乎会破坏拖动功能。添加其他项目，如普通div、标题等，则正常工作。

我制作了一个jsfiddle来说明问题(http://jsfiddle.net/s5jvpymy/1/)，其中实现了Slick Carousel：

$('.container').slick({
            dots:true,
            arrows:false,
});

$('.container').slickAdd('<div class="item"><img src="http://media.caranddriver.com/images/media/51/dissected-lotus-based-infiniti-emerg-e-sports-car-concept-top-image-photo-451994-s-original.jpg" /></div>');

由于标记在slick初始化之前设置，前两张图片都可以正常工作。然而，当滑动到最后一张图片时，无法在任何方向上拖动。

我已经检查了标记和CSS，第三个项目与其他两个项目完全对应，所以我不确定是什么原因导致了这个问题。

奇怪的是，这个问题只存在于Firefox中。在Chrome和IE中，它可以正常工作。

有没有人知道为什么Firefox会出现这种情况？

- Lildholdt

---

你的fiddle在最后一张图片上运行正常。可能是浏览器问题吗？我现在使用的是Chrome浏览器。 - Michelangelo

@Mikey，楼主说问题只出现在Firefox浏览器中。 - Pointy

他提到在IE和Chrome中运行良好，问题出现在Firefox上，我能够复制该问题。 - Justin

我认为记录这个错误是正确的做法。 - Pointy

@Phillips126：我的错，我现在明白了 :) - Michelangelo

Answer 1

另一种解决方案可能是防止元素拖动，似乎火狐浏览器的拖动事件干扰了滑块事件。

$('.container').on( 'dragstart', 'img', function() { return false; } );

-DEMO-

- A. Wolff

Answer 2

尝试将以下内容添加到您的主Slick库文件中

Slick.prototype.swipeHandler = function(event) { event.preventDefault();

根据Slick的Github页面，这应该解决您的问题，请查看这里。

- Justin Breiland

---

简单的修复，完美地解决了问题。非常感谢 :) - Lildholdt