Javascript jede Schleife durch Schieberegler Einstellungen

Question

Ich versuche, eine jede Schleife für die Einstellungen meiner Slick-Schieberegler zu tun.

Der Inhalt in den Einstellungen ist wie folgt:

$('.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", 
}); 

So jeder Schieber im Grunde die gleichen Einstellungen benötigt, aber mit dem Wähler und der Klasse in prevArrow und nextArrow eines für jedes upping. Sie alle haben einen gemeinsamen übergeordneten Wrapper namens .slider-wrapper.

Ich denke, ich muss eine jede Schleife des Elternteils tun, Kind Element zu bekommen.

Schieberegler +=1 und verwenden Sie +=1 unter den prev/next Einstellungen.

Dies ist wahrscheinlich voller Fehler, aber es ist so ziemlich das Beste, was ich alleine ausarbeiten könnte.

EDIT: HTML-Markup

<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> 

und so weiter mit mehreren Schiebern.

Answer 1

Wenn Ihr Schieber alle die Klasse slider haben, dann dies Sie tun können, die each Methode auf das ausgewählte Element Sammlung Anwendung:

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

Wenn Sie auf jedem Schiebeelement die slider Klasse nicht haben, sondern eine Klasse mit einer eindeutigen Nummer, um es suffixed, dann verwenden Sie diesen Selektor:

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

aber wirklich, sollten Sie nicht verschiedene Klassen zu jedem Schieber zuweisen. Ein Klassenname ist kein eindeutiger Bezeichner. Sie können es für ähnliche Elemente wiederverwenden.