添加图片会导致 slick carousel 出现故障

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 会这样吗？

Answer 1

尝试将其添加到您的主 slick 库文件中

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

根据 slick 的 github，这应该可以解决您的问题，查看一下 here

Answer 2

另一种解决方案可能是防止拖动元素，看起来 firefox 拖动事件正在干扰滑块一：

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

添加图片会导致 slick carousel 出现故障

Adding images causes slick carousel to malfunction

html

javascript

css

jquery

slick.js

-DEMO-