Question

我试图为我的光滑滑块设置每个循环。

设置中的内容如下：

$('.slider1').slick({
  dots: false,
  infinite: true,
  swipe: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 1,
  prevArrow: ".pp1",
  nextArrow: ".nn1",
});

$('.slider2').slick({
  dots: false,
  infinite: true,
  swipe: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 1,
  prevArrow: ".pp2",
  nextArrow: ".nn2",
});

因此每个滑块需要基本相同的设置，但选择器和prevArrow中的类以及nextArrow为每个滑块增加一个。它们都有一个名为.slider-wrapper的公共父包装器。

我想我必须做父节点的每个循环，得到子元素。

滑块+=1并在+=1设置中使用prev/next。

var prev = '.pp';
var next = '.nn';
var sliders = '.slider';
function prevAdd() {
    return prev += 1;
};

function nextAdd() {
    return next += 1;
};

function slidersAdd() {
    return sliders += 1;
};

$.each('.slider-wrapper').child(slidersAdd()).slick({
    prevArrow: prevAdd(),
    // various settings
});

这可能充满了错误，但这是我自己能够解决的最佳问题。

编辑：Html标记

<div class="slider-wrapper">
    <div class="slider-nav>
         <button class="pp1">prev</button>
         <button class="nn1">next</button>
    </div>
    <div class="slider1">
        <!-- list of divs for slider elements. Irrelevant for problem -->
    </div>
</div>

<div class="slider-wrapper">
    <div class="slider-nav>
         <button class="pp2">prev</button>
         <button class="nn2">next</button>
    </div>
    <div class="slider2">
        <!-- list of divs for slider elements. Irrelevant for problem -->
    </div>
</div>

以及多个滑块等。

Answer 1

如果你的滑块都有类slider，那么你可以这样做，在所选元素集上应用each方法：

$('.slider-wrapper .slider').each(function (index, slider) {
    var id = index + 1; 
    $(slider).slick({
        prevArrow: ".pp" + id,
        nextArrow: ".nn" + id,
        // various settings
    });
});

如果在每个滑块元素上没有slider类，但是后缀为唯一编号的类，则使用此选择器：

$('.slider-wrapper [class^=slider]').each( // ...etc

但实际上，您不应该为每个滑块分配不同的类。类名不是唯一标识符。您可以将其重用于类似的元素。

Javascript每个循环通过滑块设置

1 个答案: