come aggiungere le miniature ai punti del cursore scorrevole che menzionano la diapositiva corrente

Attualmente sto lavorando su un nuovo progetto che richiede un cursore. Ho implementato JS slick per uno dei miei progetti.come aggiungere le miniature ai punti del cursore scorrevole che menzionano la diapositiva corrente

Ora ho bisogno di aggiungere le miniature che apparirà quando si passa il puntini che collegheranno al cursore

Ad esempio, fare clic sulla prima pollice e il cursore avanzerà alla prima diapositiva, .... cliccare sul terzo e scivola alla terza diapositiva.

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>

fonte

2014-07-25 KKGupta

Non so esattamente come, ma quello che puoi fare è aggiungere un attributo onmouseover separato a ogni punto, che chiamerà la funzione javascript richiesta, quindi nella funzione ottieni X, Y coordinate del puntatore del mouse e visualizza la miniatura in corrispondenza delle coordinate X, Y. – orb

vedere il seguente link. È molto utile implementare il concetto di chiazza di petrolio http://kenwheeler.github.io/slick/ – Sathiyaraj

È possibile sostituire i puntini con miniature personalizzate. Si avrebbe bisogno di aggiungere le miniature da qualche parte (ad esempio, in un div nascosti all'interno della confezione di diapositive immagine Vedere il codice di riferimento:.

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

Si sarebbe anche bisogno di modificare il nativo css Slick cercapersone per rimuovere i punti e aggiungere più spazio e stili per le anteprime

fonte

2014-08-03 18:34:16 lifecoder

I non credo che sia necessario fare qualcosa per "rimuovere i punti", vedere un paio di esempi: https://jsfiddle.net/oL5bjae1/ e https://jsfiddle.net/simeydotme/9nm4ctv9/ –

Sto usando questo all'interno di una giostra dinamica, quando le immagini delle diapositive vengono rimosse, le vecchie miniature non vengono rimosse. Come posso "cancellare" il vecchio paging personalizzato quando viene creato un nuovo cercapersone personalizzato? attualmente di fronte ad un accumulo in cui quando vengono rimosse le vecchie diapositive, le loro miniature non lo sono – Prefix

come aggiungere le miniature ai punti del cursore scorrevole che menzionano la diapositiva corrente

risposta

Problemi correlati