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

Question

现在，我有一个使用圆滑的可拖动图像容器，当使用Chocolat.js进行一次单击时，我希望预览全尺寸，

问题是当我释放鼠标(在dragg之后)，仍然启动整个屏幕，

当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

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())
});

我就这样修好了。手动处理事件和索引

Answer 2

你有什么地方的演示吗?这样我就能理解这个bug了？

无论如何，这个页面充满了示例，您可以在浏览器中打开它：

https://github.com/nicolas-t/Chocolat/blob/master/dist/index.html

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