Wie füge ich Thumbnails zu Slick-Gleitern hinzu, die die aktuelle Folie erwähnen

Ich arbeite gerade an einem neuen Projekt, das einen Slider benötigt. Ich habe Slick JS für eines meiner Projekte implementiert.Wie füge ich Thumbnails zu Slick-Gleitern hinzu, die die aktuelle Folie erwähnen

Jetzt brauche ich Thumbnails hinzufügen, die angezeigt wird, wenn wir die Punkte schweben, die mit dem Schieber

Zum Beispiel verbinden wird, klicken Sie auf den ersten Daumen und Schieber zum ersten Folie wechseln wird, .... klicken Sie auf dritte und gleitet auf die dritte Folie.

HTML

<html> 
     <head> 
     <title>My Now Amazing Webpage</title> 
     <link rel="stylesheet" type="text/css" href="slick/slick.css"/> 
     <link rel="stylesheet" type="text/css" href="slick/style.css"/> 
     </head> 
    <body> 
<!-- THis is the slider code --> 
     <div class="center"> 
      <div><img alt="slide 2" src="images/img1.jpg"></div> 
      <div><img alt="slide 2" src="images/img2.jpg"></div> 
      <div><img alt="slide 2" src="images/img3.jpg"></div> 
      <div><img alt="slide 2" src="images/img4.jpg"></div> 
      <div><img alt="slide 2" src="images/img5.jpg"></div> 
     </div> 

     <script type="text/javascript" src="slick/jquery-1.11.0.min.js"></script> 
     <script type="text/javascript" src="slick/jquery-migrate-1.2.1.min.js"></script> 
     <script type="text/javascript" src="slick/slick.min.js"></script> 

     <script type="text/javascript"> 
     $('.center').slick({ 

      centerMode: true, 
      centerPadding: '60px', 
      slidesToShow: 1, 
      dots: !0, /* It is for the navigation dots */ 
      draggable: !1, 
      responsive: [ 
      { 
       breakpoint: 768, 
       settings: { 
        arrows: false, 
        centerMode: true, 
        centerPadding: '40px', 
        slidesToShow: 1 
       } 
      }, 
      { 
       breakpoint: 480, 
       settings: { 
        arrows: false, 
        centerMode: true, 
        centerPadding: '40px', 
        slidesToShow: 1 
       } 
      } 
      ] 
     }); 
     </script> 
    </body> 
</html>

Quelle

2014-07-25 KKGupta

Ich weiß nicht genau wie, aber was Sie tun können, ist ein separates onmouseover Attribut zu jedem Punkt hinzufügen, die die erforderliche JavaScript-Funktion aufrufen wird. Dann in der Funktion erhalten die X, Y Koordinaten des Mauszeigers und zeige das Thumbnail an diesen X, Y Koordinaten an – orb

siehe folgenden Link Es ist sehr nützlich Slick Konzept zu implementieren http://kenwheeler.github.io/slick/ – Sathiyaraj

Sie Punkte mit benutzerdefinierten Thumbnails ersetzen. Sie müßten Thumbnails irgendwo hinzuzufügen (zum Beispiel in einem versteckten div innerhalb des Bild Dia-Wrapper Siehe den Code als Referenz:.

$('.slideme').slick({ 
    dots: true, 
    customPaging: function(slider, i) { 
    // this example would render "tabs" with titles 
    return '<button class="tab">' + $(slider.$slides[i]).find('.slide-title').text() + '</button>'; 
    }, 
});

Sie müssen auch den native Slick Pager css zwicken up Punkte zu entfernen und hinzufügen mehr Platz und Stile für Ihre Thumbnails

Quelle

2014-08-03 18:34:16 lifecoder

I glaube nicht, dass du tatsächlich etwas tun musst, um "die Punkte zu entfernen", siehe ein paar Beispiele: https://jsfiddle.net/oL5bjae1/ und https://jsfiddle.net/simeydotme/9nm4ctv9/ –

Ich benutze dies Innerhalb eines dynamischen Karussells werden die alten Thumbnails nicht entfernt, wenn die Folienbilder entfernt werden. Wie lösche ich altes benutzerdefiniertes Paging, wenn ein neues benutzerdefiniertes Paging erstellt wird? Derzeit sieht man sich einer Häufung gegenüber, bei der die alten Dias nicht entfernt werden – Prefix

Wie füge ich Thumbnails zu Slick-Gleitern hinzu, die die aktuelle Folie erwähnen

Antwort

Verwandte Themen