SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 72 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > Owl Carousel > Owl Carousel 2

Owl Carousel 2

30 novembre 2017 – par chankalan, Mist. GraphX – 15 commentaires

9 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

Si vous vous arrangez autrement, il est possible de désactiver les styles dans les pages publiques de votre site, 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>

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
  • 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.
  • URLhashListener=true : pour suivre le diaporama dans l’historique de navigation.

Voir en ligne : https://plugins.spip.net/owlcarousel

Dernière modification de cette page le 11 février 2018

Retour en haut de la page

Vos commentaires

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

    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 navText

      1.  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

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

      Télécharger

      les styles css sont a adapter ensuite.

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

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

    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

      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

    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

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mailsubscribers

    16 janvier 2013 – 407 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes de (...)

  • SPIP 3.2, Agenda et FullCalendar

    6 juin – commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)

  • Convertir un site SPIP 3 en utf-8 avec le plugin Grenier

    8 janvier 2014 – 22 commentaires

    SPIP 3 fonctionne nativement avec l’encodage universel unicode utf-8. Sur certains sites (par exemple sur une mise à jour), on peut avoir un site qui est resté en iso-latin ce qui n’est pas conseillé (source de bugs, d’incompatibilité, ...) . (...)

  • Nouvelle version - Modération de modifications

    29 janvier 2012 – 49 commentaires

    Suite à une migration depuis SPIP-Agora, j’ai développé ce plugin permettant de reprendre la fonctionnalité « Nouvelle version » inexistente sur SPIP2 ni sur SPIP3 Ce plugin permet d’étendre le work-flow de -rédaction-publication d’un article au cas d’un (...)

  • ScolaSPIP 4

    19 janvier 2016 – 358 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)