web-dev-qa-db-fra.com

Afficher la moitié de la diapositive suivante sans mode Centre dans Slick Slider

Ce que je veux, c'est avoir un curseur qui montre 3,5 diapositives à la fois, la diapositive la plus à droite étant celle qui n'est qu'à moitié affichée. J'ai vu quelque chose comme ça se faire avec succès en utilisant centerMode et centerPadding avec un slick slider, mais je ne veux pas que les diapositives soient centrées. En d'autres termes, je veux que la diapositive la plus à gauche soit alignée avec le côté de la fenêtre, totalement visible, mais que la diapositive la plus à droite soit à moitié dans la fenêtre, à moitié dégagée. Est-ce possible en nappe? J'ai vu des gens utiliser slidesToShow: 3.5, mais cela fait que la diapositive la plus à gauche disparaît à moitié de l'écran et j'en ai besoin à droite.

jqueryslick.js
10
Cook88

Pas besoin d'ajouter "l'option slidesToShow: 3.5"

Appelez simplement slick: -

$('.Your-container').slick({
    arrows: false,
});

et ajoutez le CSS suivant:

.slick-list{padding:0 20% 0 0;}

Soit vous pouvez donner un rembourrage fixe à droite ou en pourcentage.

31
Abdul Rahman

Vous pouvez faire quelque chose comme ça slidesToShow: 3.5 et fais infinite: false. La diapositive la plus à droite affichera la moitié.

17
kophygiddie

Vous pouvez également le faire dans slick en ajoutant ces deux paramètres dans le slick init:

centerMode: true,
centerPadding: '20%',

C'est l'équivalent de

.slick-list{padding:0 20% 0 0;}
8
Gcamara14

Veuillez ne pas utiliser slidesToShow avec des décimales.

Selon Documentation officielleslidesToShow est de type int et non float. Son utilisation comme float provoque des exceptions imprévisibles sur l'événement breakpoint (lorsque vous avez spécifié une option de point d'arrêt personnalisé).

Vous pouvez en savoir plus sur ces problèmes dans les discussions Slick GitHub officielles ici , ici .

3
kosmeln