javascript - 单击图库中的图像时前进光滑 slider (一页上有多个光滑 slider )

Question

我遇到了这种对光滑 slider 的修改，以便在单击当前图像时前进(见下文)。当我在包含多个画廊的页面上实现它时，当我单击一个画廊时，它会推进所有画廊，而不仅仅是选定的画廊。是否有可能使用例如“this”选择器在这里？ http://codepen.io/ethanclevenger91/pen/MYNGrN

window.onload=function(){
    $slideshow = $('.slider').slick({
        dots:false,
        autoplay:false,
        arrows:false,
        adaptiveHeight: true,
        slidesToShow:1,
        slidesToScroll:1
    });
    $(".slide").click(function() {
        $slideshow.slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1);
    });
};

Answer 1

请参阅以下代码笔:http://codepen.io/anon/pen/ZOGmWo?editors=1010

主要思想是单独定义每个 slider 。

首先，定义一个对象来容纳所有 slider :

var sliders = {};

然后，循环遍历所有 slider ，提取 ID 并保存对 map 中新定义的 slider 的引用，并按 ID 进行索引:

$('.slider').each(function (index, slider) {
    var id = slider.getAttribute('id');
    console.log(id);
    sliders[id] = $(slider).slick({ ... })
});

现在，在点击处理程序上，我们使用 $(this).closest('.slider') 并使用对其进行进度来确定单击的幻灯片属于哪个 slider 。

$('.slide').click(function() {
    var id = $(this).closest('.slider').get(0).getAttribute('id');
    var $slideshow = sliders[id];
    $slideshow.slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1);
});