添加图像会导致光滑的轮播出现故障

Adding images causes slick carousel to malfunction

本文关键字：故障 图像 添加      更新时间：2023-09-26

我正在使用光滑的轮播在我的网站上显示图像。但是，在使用slickAdd方法时，我遇到了一个奇怪的问题。

使用此方法时，它似乎弄乱了拖动功能。其他项目，如普通的div，标题等，在添加时工作正常。

我制作了一个 jsfiddle 来说明问题 （http://jsfiddle.net/s5jvpymy/1/） 光滑的轮播实现如下：

$('.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>');

由于在光滑初始化之前设置了标记，因此前两个图像工作正常。但是，当滑动到最后一个图像时，无法向任何方向拖动它。

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

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

有人知道为什么 Firefox 会这样吗？

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

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

-演示-

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

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

根据slick的github，这应该可以解决您的问题，请在此处查看

相关文章：