Question

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

请参阅以下codepen：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);
});

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

1 个答案: