我正在使用 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 会这样吗?
最佳答案
另一种解决方案可能是防止在元素上拖动,看起来 firefox 拖动事件正在干扰第一个 slider :
$('.container').on( 'dragstart', 'img', function() { return false; } );
-DEMO-
关于javascript - 添加图片会导致 slick carousel 出现故障,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27781770/