Owl Carousel 2

Published : 30 November 2017 – updated on 27 April 2022 – by chankalan, Mist. GraphX – 108 commentaires

1
2
3
4
5
14 Votes

Owl Carousel est un diaporama jQuery adaptable aux différentes tailles d’écran, qu’on peut actionner par glisser, il utilise CSS3 mais il est compatible avec les vieux navigateurs, et il est aussi paramétrable.
Le présent plugin permet d’utiliser facilement Owl Carousel dans SPIP.

Lien de référence : https://owlcarousel2.github.io/OwlCarousel2/

Installation

Comme tous les plugins.

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>


Paramètres

  • 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)

Discussion

5 years 1 year 3 months Without limit
par date
Filter

25 discussions

  • 1
    Renee Picard

    Je voudrais changer «prev» par un flèche en fontawesome
    Je ne trouve pas où est:
    <div class="owl-prev">prev</div>
    Merci

    • Mist. GraphX

      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 navText

       navText : ['<span class="icon icon-precedent"></span>','<span class="icon icon-suivant"></span>'],

      les chaines de langue sont déjà dans lang/owlcarousel_fr.

      vous pouvez donc aussi depuis une surcharge de lang

      	// P
	'prec'=>'<span class="icon icon-precedent"></span>',
	'suiv'=>'<span class="icon icon-suivant"></span>'

      les styles css sont a adapter ensuite.

      et si on veut faire quelque chose d’accessible ce serait plutot

      '<span class="icon icon-precedent" aria-hidden="true"></span><span class="visuallyhidden">Précédent</span>'

    Reply to this message

  • 1
    baloo

    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

    • Mist. GraphX

      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

    Reply to this message

  • 4
    baloo

    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

    • Mist. GraphX

      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 …

    • chankalan

      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.

    • baloo

      merci beaucoup.
      Avez vous une idée pour le défilement vertical ?

    • Mist. GraphX

      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

      animateOut
animateIn

      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

    Reply to this message

  • 1
    baloo

    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)

    • Mist. GraphX

      Bonsoir,

      merci pour le retour, effectivement ça a pus changé entre la version précédente de owl et celle actuelle.

      je corrige ça …

    Reply to this message

  • 1
    Tyte

    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

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

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.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom