Un bandeau défilant d'images ou de blocs HTML.
{up slider-owl |items=2}< div>...< /div>
< img src="/...">
< a href="/..">< img src="/...">< /a>
{/up slider-owl}- 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
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
N° 1
le premier bloc
2
et un peu de texte
N° 3
N° 4
{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
upactionslist (1) readmore (1) csv2def (1) slider-owl (3) jcontent-info (1)