slider-owl ~ bandeau défilant images et blocs HTML

Un bandeau défilant d'images ou de blocs HTML.

🆙 slider_owl : bandeau défilant d'images ou de blocs HTML

Cliquer pour lire la documentation

{up slider-owl |items=2}
< div>...< /div>
< img src="/...">
< a href="/..">< img src="/...">< /a>
{/up slider-owl}
@author: LOMART @version: UP-1.0 @license: GNU/GPLv3 @credit: script OWL Carousel de OwlFonk @tags: image
  • slider_owl: aucun paramètre nécessaire
  • max-height = 1: égalise la hauteur de tous les blocs

Style CSS

  • id: id genérée automatiquement par UP
  • class: classe(s) ajoutées au bloc principal
  • style: style inline ajouté au bloc principal
  • css-head (base-css): style ajouté dans le HEAD de la page

JS : autoplay

  • autoPlay: 0 ou durée affichage image en millisecondes
  • slideSpeed = 200: vitesse de transition en millisecondes

JS : pagination

  • paginationSpeed: durée changement en millisecondes
  • pagination = true: affiche pagination
  • paginationNumbers: affiche numéros à l'intérieur des boutons de pagination

JS : navigation

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

JS : nombre d'images selon largeur écran

  • responsive = true: adaptation sur petits ecrans
  • items: nombre maxi d'éléments affichés en même 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
Version 2.9
ajout option css-head
Voir les nouveautésreplier

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/Ecureuil-rouge-eurasien.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/actions/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

Pour info, cette page utilise 7 action(s) :
upactionslist (1) readmore (1) csv2def (1) slider-owl (3) jcontent-info (1)
Détails