Comment puis-je ajouter des classes d'éléments dans Owl Carousel 2?
Mon but est de faire un carrousel qui ressemble à ceci:
Dans le cas où vous ne savez pas ce que vous êtes en train de regarder, il y a 5 images/articles, mais seulement celui du centre est affichée dans sa taille réelle. Les images à côté du centre de l'un sont plus petits, et les extérieurs encore plus petites.
J'ai atteint ce niveau dans la première version de Owl Carousel, mais il ne supporte pas de boucle, ce qui rend cette conception ridicule (ne peut pas atteindre le côté images...).
Voici comment je l'ai fait:
var owl = $("#owl-demo");
owl.owlCarousel({
pagination: false,
lazyLoad: true,
itemsCustom: [
[0, 3],
[900, 5],
[1400, 7],
],
afterAction: function(el){
.$owlItems
.removeClass('active') //what I call the center class
.removeClass('passive') //what I call the next-to-center class
this
.$owlItems
.eq(this.currentItem + 2) //+ 2 is the center with 5 items
.addClass('active')
this
.$owlItems
.eq(this.currentItem + 1)
.addClass('passive')
this
.$owlItems
.eq(this.currentItem + 3)
.addClass('passive')
}
Juste vous montrer le code pour les 5 éléments, mais j'ai utilisé des si-clauses de le faire fonctionner pour le 3 et le 7. Le active
classe est composée de width: 100%
et la passive
un width: 80%
.
Personne ne sait comment obtenir le même résultat en Owl Carousel 2? Je suis en utilisant _items
au lieu de $owlItems
mais je ne sais pas si c'est correct. Il n'y a pas de afterAction
et les événements/rappels ne semblent pas fonctionner comme ils le devraient dans la v2.
OriginalL'auteur | 2015-03-06
Vous devez vous connecter pour publier un commentaire.
Vous pouvez le faire de cette façon:
En écoutant l'événement de votre choix
Liste des événements disponibles ici
Dans la démo, je viens d'ajouter la classe grand à l'élément principal, et la classe moyen à la précédente et la suivante. À partir de ce que vous pouvez jouer avec n'importe quelle propriété css que vous voulez.
DÉMO
REMARQUE:
Vous pouvez aussi tout simplement jouer avec des classes de plugin,
.active
et.center
(ou vous pouvez également définir votre propre, comme vous pouvez le voir ici: classes personnaliséesJe ne sais pas pourquoi ils ne sont pas dans le package zip, mais vous pouvez le trouver sur github du projet (github.com/smashingboxes/OwlCarousel2/tree/develop/src/css). Vous n'avez pas absolument besoin, mais je l'ai attaché à un style à jouer du violon comme sur le chouette site de démo 😉
cette fonction fonctionne uniquement curseur unique pas à plusieurs . il est possible que cette fonction tous les curseur .
tous que vous êtes à la manifestation du lien de la démo est obsolète, veuillez actualiser votre e code @RobinLeboeuf
OriginalL'auteur Robin Leboeuf
ajouter ceci dans votre css et le fichier js.
});
OriginalL'auteur Jaber