Lien de référence : https://owlcarousel2.github.io/OwlCarousel2/
Installation
Configuration
Vous pouvez activer l’insertion des styles et javascript du plugin dans l’espace public et dans l’espace privé de spip sur la page de configuration du plugin.
Exemples
Des exemples utilisables dans vos squelettes se trouvent dans le dossier « noisettes » du plugin. Ce répertoire est plus un outil pour squelette, et destiné plus particulièrement aux intégrateurs.
Les noisettes fournies peuvent servir de point de départ et ne conviendront certainement pas à tous les cas d’utilisation en l’état.
Il faut plus les considérer comme des extraits de code facilitant l’intégration à votre projet.
Modèle
Un modèle est tout prêt pour afficher les documents d’un article de type jpg, gif ou png dans un diaporama insérable de cette manière :
<articleX|owl>
où « X » est l’id de l’article, pour afficher toutes les images de cet article.
Quelques paramètres permettent de modifier quelques réglages, et se définissent de cette manière lors de l’inclusion du modèle :
<articleX|owl|parametre=valeur>
- id-carousel=unikid : id unique du carousel, doit être renseigné si plusieurs carousels dans la même page.
- caption=oui : afficher la description de l’image
- dots=false (true par defaut) : affiche les points pour changer d’image
- navigation=true (false par defaut) : afficher les boutons précédents/suivants
- items=2 (1 par défaut) : pour afficher plusieurs images en même temps
- margin=10 : pour ajouter une marge entre chaque image, en pixels
- docs=1,2,3 : affiche uniquement les documents 1, 2 et 3. Dans ce cas, le numéro identifiant de l’article est optionnel, vous pouvez donc écrire
<article|owl|docs=1,2,3>pour afficher ce diaporama n’importe où dans le site, tant que les documents existent dans la médiathèque - caption_css=monstyle : ajouter des css sur la description (par exemple : invisible)
- autoHeight=true : pour que la hauteur soit adaptée à chaque diapositive
- autoplay=true (false par défaut) : le carousel démarre automatiquement
- autoplayHoverPause=true (false par défaut) : pause au survol en mode autoplay
- autoplayTimeout=6500 (5000 par défaut, en milliseconde) : durée d’affichage d’une diapositive
- lazyLoad=true (false par défaut) : ne charge que les images visibles pour optimiser le chargement.
- animateIn= une classe css animation CSS3. par défaut seul fadeOut est proposé par le plugin.
- animateOut= une classe css animation CSS3. par défaut seul fadeOut est proposé par le plugin.
- URLhashListener=true : pour suivre le diaporama dans l’historique de navigation.
Version 1.0.13
RSS 2.0
Vos commentaires
# Le 24 août à 19:41, par baloo
En réponse à : Owl Carousel 2
Bonjour,
le plugin fonctionne bien chez moi dans l’espace public mais dans l’espace privé je vois les images les unes en dessous des autres et le Javascript.
y a t-il un moyen pour le voir correctement ?
merci
# Le 25 août à 07:46, par Mist. GraphX
En réponse à : Owl Carousel 2
Bonjour,
J’ai publié une version ajoutant une configuration supplémentaire pour inssérer les styles et js dans l’espace privé.
ce sera la v 1.0.13
https://zone.spip.org/trac/spip-zone/changeset/111429/spip-zone
Bonne journée.
# Le 25 août à 10:54, par Mist. GraphX
En réponse à : Owl Carousel 2
Le cache de l’espace privé est dans local/cache/css et local/cache/js pour info
Répondre à ce message
# Le 6 juillet à 11:30, par beno
En réponse à : Owl Carousel 2
Bonjour,
Est-il possible d’utiliser Owl Carousel pour afficher des vignettes (comme dans objet-portfolio) en faisant varier le nombre d’items selon la taille de l’écran
ou, pour le dire différemment, comment rendre ce défilement de vignettes responsive ?
Et, j’aurais dû commencer par ça, merci pour cet excellent plugin !
# Le 6 juillet à 12:26, par chankalan
En réponse à : Owl Carousel 2
Bonjour,
oui, en utilisant le paramètre items dans le modèle article_owl.html
<article1|owl|items=4>on aura déjà 4 vignettes en même temps au-dessus de 640px de large, et en-dessous il n’y en aura qu’une seule.
https://zone.spip.org/trac/spip-zone/browser/spip-zone/_plugins_/owlcarousel/trunk/modeles/article_owl.html#L70
Pour affiner il faut prendre exemple et se faire un modèle perso... ?
# Le 23 août à 11:18, par beno
En réponse à : Owl Carousel 2
Bonjour Chankalan et merci !
C’est Tip top, comme sur des roulettes.
Sauf le nav:true qui ne fonctionne pas quoiqu’on fasse. Comment faire pour faire apparaître des flèches pour prévenir (sur les desktop) que c’est un bandeau scrollable ?
# Le 23 août à 11:53, par chankalan
En réponse à : Owl Carousel 2
Bonjour, de rien, et les paramètres proposent navigation=true ...
https://contrib.spip.net/Owl-Carousel-2#parametres
# Le 23 août à 12:12, par beno
En réponse à : Owl Carousel 2
J’ai essayé, mais ça reste en « .owl-nav.disabled » donc no affiché.
Mais d’ailleurs, peut-on passer le paramètre dans le squelette ?
# Le 23 août à 12:21, par chankalan
En réponse à : Owl Carousel 2
Je ne connais pas le fichier inclure/logos.html, mais sur le fichier modeles/article_owl.html oui avec la syntaxe appropriée : https://programmer.spip.net/MODELE
Répondre à ce message
# Le 2 août à 18:31, par kiki
En réponse à : Owl Carousel 2
Bonjour
le plugin est super je l’ai installé sur un spip3.18
mais j’aimerai ajouter un effet de transition « fade » car d’origine c’est un peu brutal/direct comme transition.
j’ai essayé :
mais ça marche pas ...
Merci pour votre aide ;)
Kiki
# Le 3 août à 09:35, par Mist. GraphX
En réponse à : Owl Carousel 2
Bonjour Kiki,
Ce paramètre n’était pas rajouté dans ce modèle, mais juste dans les squelettes situés dans le dossier noisettes/ du plugin.
Je l’ai rajouté ce sera dispo dans le prochain paquet généré.
Bonne journée.
# Le 3 août à 10:04, par kiki
En réponse à : Owl Carousel 2
ouahh merci !!!
Répondre à ce message
# Le 27 juillet à 21:20, par Metaldark
En réponse à : Owl Carousel 2
Bonjour,
je souhaiterais insérer un carrousel qui affiche les images des 5 derniers articles et leur descriptifs rapides dans mon SPIP 3.2, mais étant débutant je n’arrive pas à trouver le code exact et où l’insérer.
Pouvez-vous m’aider svp ?
Merci d’avance.
# Le 28 juillet à 07:27, par Manu
En réponse à : Owl Carousel 2
Le plus simple est de s’appuyer sur les codes présents sur a démo de owl carousel
Par exemple, si tu veux reproduire l’exemple présent sur la page https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html
la boucle suivante devrait te donner le résultat attendu (en n’oubliant pas de mettre dans la page l’appel au javascript pour que le carousel se « mette en marche »)
Télécharger
Répondre à ce message
# Le 21 mai à 06:34, par Renee Picard
En réponse à : Owl Carousel 2
Je voudrais changer « prev » par un flèche en fontawesome
Je ne trouve pas où est :
<div class="owl-prev">prev</div>Merci
# Le 21 mai à 08:11, par Mist. GraphX
En réponse à : Owl Carousel 2
Bonjour,
J’ai modifié les modèles, du plugin, afin que ce soit plus facile, mais en résumé :
Dans les options de owl vous pouvez changer le text avec l’option
navTextles chaines de langue sont déjà dans lang/owlcarousel_fr.
vous pouvez donc aussi depuis une surcharge de lang
Télécharger
les styles css sont a adapter ensuite.
et si on veut faire quelque chose d’accessible ce serait plutot
Répondre à ce message
# Le 26 février à 13:49, par baloo
En réponse à : Owl Carousel 2
Bonjour,
encore moi. J’utilise oEmbed.
Pourriez vous donner un exemple d’utilisation du modèle owlvideoplayer je m’emmêle avec la syntaxe objet pour avoir les videos d’une rubrique je met
<owlvideoplayer|id_objet=106|objet=rubrique>et j’ai parametre d’inclusion incorrect env
# Le 26 février à 14:19, par Mist. GraphX
En réponse à : Owl Carousel 2
Bonjour,
effectivement il y’avais une coquille dans le modèle, au niveau de
{navigation,#ENV{navigation}}c’est
{navigation=#ENV{navigation}}je fais la correction merci du retour
Répondre à ce message
# Le 11 février à 19:00, par baloo
En réponse à : Owl Carousel 2
bonsoir,
1- savez vous pourquoi le numéro de l’image en cours s’affiche dans l’adresse comme cela :
https://paroissesaintjeandulez.cef.fr/#1363
mieux si j’ai un deuxième slider dans la page d’id slider_carrousel ( en local pour l’instant)
j’ai soit #slider_carrousel soit le numero de l’image du bandeau dans l’adresse
j’ai du mettre queque chose en trop dans le js..
2- est-ce qu’il existe un mode défilement vertical ?
cela dit je trouve ce slider efficace
# Le 11 février à 21:01, par Mist. GraphX
En réponse à : Owl Carousel 2
Bonsoir,
C’est en fait le
data-hash=""qui est dans le html. Ceci permet de piloter les items du carousel si vous utilisez des vignettes ou autres éléments.Et si il y’a plusieurs carousel a piloter le bon.
Si vous n’utilisez pas de vignette le
data-hash=peut être supprimé.Je vois que vous avez aussi des erreurs javascript sur flexslider et anything slider …
# Le 11 février à 22:15, par chankalan
En réponse à : Owl Carousel 2
Bonsoir,
si je me trompe pas, ça sert aussi à suivre le diaporama dans l’historique de navigation, et ça peut être souhaité.
Bon, j’ai modifié le modèle article_owl.html pour qu’il prenne le paramètre URLhashListener=true pour activer ce mécanisme.
# Le 12 février à 12:36, par baloo
En réponse à : Owl Carousel 2
merci beaucoup.
Avez vous une idée pour le défilement vertical ?
# Le 12 février à 13:14, par Mist. GraphX
En réponse à : Owl Carousel 2
Bonjour,
ça à l’air envisageable, on me suggère sur IRC que le plugin SlickSlider prend en charge ce type d’option.
Cela dit ce n’est pas compliqué a rajouter au plugin owl, via des animations css3 et les options
animateOutanimateIn
je peut rajouter la prise en charge de ses deux options, ça pourra toujours être utile... et intégrer aux css les animation necessaires pour le vertical…
https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html
Répondre à ce message
# Le 7 février à 18:19, par baloo
En réponse à : Owl Carousel 2
bonsoir,
merci pour ce magnifique plugin d’un slider que je ne connaissait pas.
Pouvoir « glisser » sur un mobile pour changer d’image c’est super.
Pour info il me semble qu’il y a des anciens paramètre dans les noisettes. par exemple
navigationText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],navigationText ne marche pas chez moi mais navText oui ( j’ai regarde dans la librairie javascript)
# Le 7 février à 18:27, par Mist. GraphX
En réponse à : Owl Carousel 2
Bonsoir,
merci pour le retour, effectivement ça a pus changé entre la version précédente de owl et celle actuelle.
je corrige ça …
Répondre à ce message
# Le 16 janvier à 16:46, par Tyte
En réponse à : Owl Carousel 2
Bonsoir à tous, je viens de voir ce plugin mais j’arrive pas à le mettre en marche sur mon site.
Quelqu’un peut-il me donner la démarche à suivre ???
Merci
# Le 16 janvier à 17:19, par chankalan
En réponse à : Owl Carousel 2
Bonjour,
avez-vous suivi la procédure expliquée ici ? https://www.spip.net/fr_article3396.html
Ensuite, pour l’usage, c’est expliqué dans le texte ci-dessus...
Répondre à ce message