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 à l’intégration.
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
- tri=titre : (rang_lien par defaut) spécifier l’ordre de tri des documents
- 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.
- largeur=200 : redimenssionne les images à 200px de large.
- left|center|right : alignement du diaporama à gauche, au centre ou à droite.
Particularité
Avec le paramètre docs=1,2,3,4 et dans le cas où on n’utilise pas un numéro d’article, exemple : <article|owl|docs=1,2,3,4>
alors il faut ajouter le paramètre |tri=titre :
<article|owl|docs=1,2,3,4|tri=titre>
(le tri sur rang_lien ne peut exister s’il n’y a pas de numéro d’article)
Discussions par date d’activité
2 discussions
Bonjour,
sur un spip 3.2.19 et tous les plugins à jour, j’ai un soucis sur le slider.
J’ai 7 images dans mon slider et en front-office* le slider affiche une première image vide (il y a du coup 8 images) ce qui a pour conséquence de faire démarrer le slider en « retard ». J’ai vérifié les 7 images qui sont ok, j’ai aussi enlver du code owl pour voir mais rien ...
Est-ce que qqn a déjà rencontrer ce problème ?
Merci pour votre aide
Paolo
(* dans l’espace privé en mode visu tout est ok)
Répondre à ce message
Deux petits soucis
1) Avec dots=false un point rouge apparaît quand même. Avec dots=true un seul point rouge apparaît alors qu’il y a 10 images dans le diaporamas.
2) En cliquant sur l’image (voir capture) :
- je voudrais effacer « Diaporama »
- j’ai un compteur (6/20) alors que je suis à la première image et qu’il n’y en a que 10 (donc 01/10)
- le titre de l’image apparaît alors que j’ai spécifié caption=non
Merci et bravo !
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires :
|
