Last glatt mit Onclick

Question

Mein Problem ist einfach, aber ich vermisse den Wald durch die Bäume ...

Meine Seite viele Slick-Schieber hat. Das funktioniert gut. Diese Schieber sind auf keinen Fall sichtbar. Per Onclick-Funktion wird ein neuer DIV-Tag mit Slick angezeigt. (toggle)

Das Problem ist jetzt: Slick lädt, wenn der Seitenladevorgang beendet ist. Aber nur die sichtbaren divs. Also, wenn ich ein div umzuschalten, um sichtbar zu werden, und es ist glatt drin enthalten, wird Slick für dieses div nicht geladen. Ich kann den Slick-Slider vorwärts oder rückwärts anklicken und es lädt alle Bilder. Aber ich möchte diese direkt mit der Onclick-Funktion des Toggle laden. Das wäre nett.

Und ich bin nicht wirklich gut in JS: D

Das ist, wo Slick geladen werden:

$(document).ready(function(){ 
    $('.lazy').slick({ 
     slidesToShow: 6, 
     slidesToScroll: 6, 
     responsive: [ 
     { 
     breakpoint: 1199, 
     settings: { 
      slidesToShow: 5, 
      slidesToScroll: 5, 
      } 
     }, 
     { 
     breakpoint: 991, 
     settings: { 
      slidesToShow: 4, 
      slidesToScroll: 4, 
      } 
     }, 
     { 
     breakpoint: 767, 
     settings: { 
      slidesToShow: 3, 
      slidesToScroll: 3, 
      } 
     }, 
     { 
     breakpoint: 730, 
     settings: { 
      slidesToShow: 2, 
      slidesToScroll: 2, 
      } 
     }, 
     { 
     breakpoint: 500, 
     settings: { 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      } 
     }, 
     ] 
    }); 
}); 

Und hier ist mein Knebel:

function fotoalbum(id){ 
     var e = document.getElementById(id); 

     if (e.className == "row fotos-container-deaktiv") { 
     e.className = "row fotos-container-produktion"; 
    } else { 
     e.className = "row fotos-container-deaktiv"; 
    } 
    }; 

Und nun möchte ich, dass Slick startet, wenn die Funktion Fotoalbum verwendet wird.

Kann mir bitte jemand helfen. :( Und ich bin so sry für mein schlechtes Englisch Ich hoffe, Sie können verstehen,.)

Answer 1

$(".somediv").click(function(e) { 
 
    $(this).toggleClass('class1'); 
 
}); 
 

 
$("#change").click(function(e) { 
 
    $(this).hasClass("change1") ? 
 
    $(this).removeClass('change1').addClass('change2') : 
 
    $(this).removeClass('change2').addClass('change1'); 
 
});

.somediv { 
 
    cursor: pointer; 
 
} 
 
.class1 { 
 
    color: red; 
 
    font-size: 20px; 
 
} 
 
.change1 { 
 
    color: blue; 
 
} 
 
.change2 { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="class1 somediv">some text</div> 
 

 

 
<div class="change1 somediv" id='change'>some other text</div>

Ich möchte Sie ermutigen, über .toggleClass()

zu lesen und wenn Sie haben dies bereits gelesen, haben auch einen Blick auf .switchClass()

Answer 2

Wie gezeigt here vom Autor können Sie Slick aktualisieren, wenn Sie ein neues div hinzufügen, die einen Slic enthalten k Objekt. Sie müssen etwas wie $('.my-slider')[0].slick.refresh() in Ihre Funktion einfügen.

Cheers