web-dev-qa-db-fra.com

Carrousel lisse pleine largeur avec mode central ne fonctionne pas

J'essaie de créer un curseur de page pleine largeur avec une diapositive à centrer et 2 diapositives seront partiellement visibles des deux côtés.

Mais pour une raison quelconque, un grand espace blanc est visible. J'ai essayé de donner une largeur d'img de 100% mais la résolution de l'image est déformante.

Code jquery:

$('.slider').slick({
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  infinite: true,
  cssEase: 'linear'
});

Démo - https://jsfiddle.net/squidraj/hn7xsa4y/

Toute aide est grandement appréciée.

jqueryhtmlcssslick.js
10
Prithviraj Mitra

Vous voudrez peut-être essayer d'utiliser:

$('.slider').slick({
centerMode:true,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    cssEase: 'linear',
    variableWidth: true,
    variableHeight: true
});

Cela devrait supprimer l'écart, mais vous devrez peut-être ajouter des css pour vous assurer que la nappe <div> sera suffisamment grand pour afficher l'intégralité de votre image. Vous pouvez également modifier le css pour les images associées.

12
Squick