单击图库中的图像时推进光滑滑块（一页上有多个光滑滑块）

Question

我遇到了这个修改，用于在单击当前图像时前进的光滑滑块（见下文）。当我在包含多个画廊的页面上实施它时，当我单击一个画廊时，它会推进所有画廊，而不仅仅是选择的那个。是否有可能使用例如"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

主要思想是分别定义每个滑块。

首先，定义一个对象来容纳所有滑块：

var sliders = {};

然后，遍历所有滑块，提取 ID 并在我们的地图中保存对新定义滑块的引用，由 ID 索引：

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

现在，在点击处理程序上，我们使用 $(this).closest('.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);
});

单击图库中的图像时推进光滑滑块（一页上有多个光滑滑块）

Advance slick slider when image in gallery is clicked (multiple slick sliders on one page)

javascript

slick.js