使用 slick.js 拖动时防止点击 Chocolat.js

Question

现在我有一个使用 slick and I want to preview full size when a single click happens using Chocolat.js、

的可拖动图像容器

问题是当我释放鼠标时（拖动后），仍然全屏显示，

我试图在 Dragg 事件开始时摧毁巧克力，但它仍然存在..

var $chocolat = $('.chocolat').Chocolat({
    imageSize: 'contain',
    loop: true
}).data('chocolat');

$('#bx-pager_builder').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true,
    beforeChange: function() {
        $chocolat.api().destroy();
    },
    afterChange: function() {
        $chocolat = $('.chocolat').Chocolat({
            imageSize: 'contain',
            loop: true
        }).data('chocolat');
    }
});

问题是 Chocolat 文档没有提供示例..

知道我正在尝试做的事情是否可行吗？（以及如何？^^）

Answer 1

你有演示吗？我可以理解这个错误？

无论如何，这个页面充满了示例，您可以在浏览器中打开它：
https://github.com/nicolas-t/Chocolat/blob/master/dist/index.html

特别是这些行： https://github.com/nicolas-t/Chocolat/blob/master/dist/index.html#L142L240 向您展示如何使用 API

Answer 2

var chocolat_images = [];
$('.chocolat .chocolat-image').each(function(i){
    chocolat_images[chocolat_images.length] = { src: $(this).find('img').attr('src')};
});
var $chocolat = $('.slick-slider.chocolat').Chocolat(
{
    imageSize: 'contain',
    loop: true,
    images: chocolat_images,
    imageSelector: ''
}).data('chocolat');

$('.chocolat').on('click', '.chocolat-image', function(e) {
    e.preventDefault();
    $chocolat.api().open($(this).index())
});

我能够像这样修复它。处理 'manually' 事件和索引

使用 slick.js 拖动时防止点击 Chocolat.js

Prevent click for Chocolat.js while dragging using slick.js

jquery

events

slick.js

chocolat.js