web-dev-qa-db-fra.com

Comment créer un carrousel de vignettes avec des aperçus d'image dans Slick.js?

Je souhaite prévisualiser l'image après avoir cliqué sur une vignette dans un diaporama. Il apparaît également des aperçus d'image dans Slick.js. Vous pouvez voir plus ici.

Comme ça:

capture

Lorsqu'un utilisateur clique sur une miniature, il affichera cet aperçu de l'image.

Je regarde toutes les démos de Slick mais je n'ai trouvé aucun exemple comme celui-ci.

javascriptslick.js
9
vanloc

Vous pouvez utiliser la synchronisation du curseur comme indiqué 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
});

On dirait: enter image description here

23
Pravesh Agrawal

J'utilise jQuery index() plus Slick slickGoTo method. Fiddle at: 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());
})

Embellissement CSS:

/*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;
}
7
Fandi Susanto