Kann nicht mehrere Divs mit benutzerdefinierter Navigation steuern

Question

Ich verwende Slick Carousel, wo ich zwei <div> s, die Scrollen müssen, wenn die nächste oder vorherige Tasten geklickt werden, sondern nur die zweite <div> scrollt. Hier ist mein HTML und JQuery:

JQuery:

var test = $('.slider').slick({ 
    dots: false, 
    infinite: true, 
    speed: 300, 
    slidesToShow: 1, 
    variableWidth: true, 
    prevArrow: $("#left-arrow"), 
    nextArrow: $("#right-arrow") 
}); 

$("#right-arrow").on('click', function() { 
    test.slickNext(); 
}); 
$("#left-arrow").on('click', function() { 
    test.slickPrev(); 
}); 

HTML:

<div id="gallery-container" class="center"> 
    <div id="left-arrow"><img src="./resources/gallery-arrow.png" alt="Scroll Left" /></div> 
    <div id="picture-container"> 
     <div class="upper-row carousel slider"></div> 
     <div class="lower-row carousel slider"></div> 
    </div> 
    <div id="right-arrow"><img src="./resources/gallery-arrow.png" alt="Scroll Left" /></div> 
</div> 

Ich benutze JQuery 3.0.0. Nur die "untere Reihe" scrollt, die obere Reihe nicht.

Die Bilder werden dynamisch über einen Ajax-Aufruf geladen, der dann meine JQuery-Funktion aufruft.

Wenn ich versuche, die # Bild-Container-ID stattdessen zu verwenden, kann ich nicht auf die Pfeile klicken, aber ich kann die Folien ziehen. Wenn ich die Dias auf diese Weise ziehe, bleibt sie jedoch nicht dort, wo ich sie verschiebe, und sie wird auf die Position "0" zurückgesetzt.

Answer 1

Meine Empfehlung wäre, .slick() auf Ihrem # Galeriebehälter aufzurufen. Lassen Sie Slick auch die Navigationstasten selbst hinzufügen, statt sie hart zu codieren. Ich habe in meinem Beispiel eine Menge Markup entfernt und das Javascript entsprechend modifiziert. Hier ist ein JSFiddle davon funktioniert.

jQuery:

$('#gallery-container').slick({ 
    dots: false, 
    infinite: true, 
    speed: 300, 
    slidesToShow: 1, 
    variableWidth: true, 
    nextArrow: '<button><i class="fa fa-angle-right"></i></button>', 
    prevArrow: '<button><i class="fa fa-angle-left"></i></button>' 
}); 

HTML:

<div id="gallery-container" class="center"> 
    <div class="upper-row carousel slider"> 
    <img src="http://unsplash.it/500/500?image=300" alt=""> 
    </div> 
    <div class="lower-row carousel slider"> 
    <img src="http://unsplash.it/500/500?image=400" alt=""> 
    </div> 
</div>