➠ slider_owl : bandeau défilant d'images ou de blocs HTML DEMO
syntaxe {up slider-owl |items=2}bloc1 bloc2 blocN{/up slider-owl}
author LOMART version 1.0 license GNU/GPLv3 credit script OWL Carousel de OwlFonk
  • slider_owl: aucun paramétre nécessaire
  • class: classe(s) ajoutées au bloc principal
  • style: style inline ajouté au bloc principal
  • autoPlay=0:
  • slideSpeed=200: Vitesse en millisecondes
  • paginationSpeed=0: Pagination en millisecondes
  • pagination=true: Affiche pagination
  • paginationNumbers=0: Affiche numéros à l'intérieur des boutons de pagination
  • goToFirst=1: Retour sur premier élément si lecture automatique à la fin
  • goToFirstSpeed=1000: vitesse de l'option goToFirst en millisecondes
  • navigation=false: Affichage boutons "next" et "prev"
  • navigationText=["prev", "next"]: boutons sans texte: "navigationText: false"
  • responsive=true:
  • items=1: Nombre maxi d'éléments affichés en meme temps sur la plus grande largeur de navigateur
  • itemsDesktop=[1199, 4]: Cela vous permet de prédéfinir le nombre de diapositives visibles avec une largeur de navigateur particulière. Le format est [x, y] où x = largeur du navigateur et y = nombre de diapositives affichées. Par exemple, [1199,4] signifie que si (window <= 1199) {affiche 4 diapositives par page} Vous pouvez également utiliser "itemsDesktop: false" pour ignorer ces paramètres. Pour bien comprendre comment cela fonctionne, consultez ma démo personnalisée
  • itemsDesktopSmall=[979, 3]: voir ci-dessus
  • itemsTablet=[768, 2]: voir ci-dessus
  • itemsMobile=[479, 1]: voir ci-dessus

    Sur le script OWL Carousel de OwlFonk, licence MIT

    {up slider-owl | items=4  | autoplay=5000 | paginationSpeed=2000}
    	<img src="images/photos/Ecureuil-rouge-eurasien.jpg" alt="Un petit écureuil">
    	<a href="#"><img src="images/photos/Un_leopard-africain--2.jpg"></a>
    	<img src="images/photos/Kenya-Cheetah-Masai-Mara.jpg">
    	<img src="images/photos/Perroquets-rouges-en-Equateur.jpg">
    	<img src="images/photos/black-crested-macaque.jpg">
    {/up slider-owl} 
    

    Avec ce simple code, on obtient le résultat ci-dessus. Items définit le nombre d'élément visible en même temps. Tout les éléments ont la même largeur (2=50%, 3=33%, 4=25%, ...). autoplay est le temps d'affichage en millisecondes et paginationSpeed la vitesse de déplacement.

    Il est important que toutes les images aient les mêmes dimensions.

    Blocs HTML

    {up slider-owl | items=2 | autoplay=3000}
    <div class="bg-bleuClair tc pv2">
        <h1 class="mt3">N° 1</h1>
        <p>le premier bloc</p>
    </div>
    <div class="bg-vertFonce t-blanc tc pv2">
        <h1>2</h1>
        <img src="images/admin/joomla-logo-32.png" alt="" />
        <p>et un peu de texte</p>
    </div>
    <div class="bg-jauneClair tc pv2">
        <img src="images/admin/css.png" alt="" />
        <h1>N° 3</h1>
    </div>
    <div class="tc">
    	<a href="#" target="_blank">
    	    <h1>N° 4</h1>
    	</a>	
    </div>
    {/up slider-owl}

    Il est possible de créer des blocs HTML avec du contenu, comme ci-dessus.

    Un mecanisme de UP va égaliser la hauteur des blocs et centrer les contenus verticalement en supprimant les margins et paddings du premier et dernier bloc.

    {up slider-owl | items=2 | navigation=1 | pagination=0 | class=bd-rouge tc}
    <div class="bg-vertFonce t-blanc tc pv2">
        <h1>N° 1</h1>
        <p>le premier bloc</p>
    </div>
    {=====}
        <h1>2</h1>
        <img src="images/admin/joomla-logo-32.png" alt="" />
        <p>et un peu de texte</p>
    {=====}
    	<img src="images/admin/css.png" alt="" />
        <h1>N° 3</h1>
    {=====}
    <a href="#" target="_blank">
        <h1>N° 4</h1>
    </a>	
    {/up slider-owl}

    Il est aussi possible de séparer les blocs par des shortcodes {=====}. Sans contrôle sur le bloc principal, cette méthode limite les possibilités de mise en forme.

    Vous remarquerez l'absence des petits cercles avec pagination=0 et l'ajout de boutons précédent/suivant avec navigation=1