Comment créer une vignette carrousel avec les aperçus d'image dans Slick.js?

Je veux aperçu de l'image après le clic pour une miniature dans un diaporama. Il apparaît également dans les aperçus d'image Slick.js. Vous pouvez voir plus ici.

Comme ceci:

Comment créer une vignette carrousel avec les aperçus d'image dans Slick.js?

Lorsqu'un utilisateur clique sur une vignette, il va montrer cette image de prévisualisation.

Je regarde tous les démonstration de la Nappe mais pas trouvé d'exemple de ce genre.

OriginalL'auteur vanloc | 2016-09-19

  1. 21

    Vous pouvez utiliser le Curseur de la Synchronisation, compte tenu de ici

    $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

    Il ressemble:
    Comment créer une vignette carrousel avec les aperçus d'image dans Slick.js?

    La grande. Je ne vois vraiment pas ce jusqu'à ce que votre commentaire. Je vous remercie beaucoup.
    Veuillez voir ma capture d'écran : prntscr.com/m1jw3b

    OriginalL'auteur Pravesh Agrawal

  2. 7

    - Je utiliser jQuery index() plus Slick slickGoTo method.
    Violon: https://jsfiddle.net/beluluk/uh8bpokb/

    Html:

    <div class='slider'>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
  <div>Slide 4</div>
  <div>Slide 5</div>
</div>

<div class='slider-nav'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

    JS:

    //Slick slider initialize
$('.slider').slick({
  arrows:false, dots: false, infinite:true, speed:500,
  autoplay:true, autoplaySpeed: 3000, slidesToShow:1, slidesToScroll:1
});
//On click of slider-nav childern,
//Slick slider navigate to the respective index.
$('.slider-nav > div').click(function() {
    $('.slider').slick('slickGoTo',$(this).index());
})

    CSS Embellissement:

    /*Slider*/
.slider > div {
  display:block; width:100%; padding: 50px 0;
  background: #FF0;
  text-align: center; font-size: 2em;
}

/* Navigation */
.slider-nav { text-align: center; }
.slider-nav > div {
  display:inline-block;
  width:30px; height: 30px; margin: 0 5px; padding: 3px 0;
  text-align: center; font-size:2em;
  background: #FC0; cursor: pointer;
}
    Ce a de sens que si elles sont au nombre de diapositives est en train de changer, au lieu d'utiliser de la Diapositive en cours de Synchronisation.
    A travaillé pour moi un grand merci

    OriginalL'auteur Fandi Susanto