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

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

Cette action est appelée à remplacer l'action jQuery slider-owl. Elle utilise le script javascript Vanillia https://ganlanyuan.github.io/tiny-slider

Le contenu

Il existe 3 méthodes pour alimenter le contenu du slider

Les images d'un dossier

précsuiv

{up slider-tiny=images/actions-demo/slider/1 | items=2
| legend
| legend-template=[div style="text-align:center"][b class="t-darkRed"]##1##[/b][br]##2##[/div]}

Toutes les images du dossier indiqué pour l'option principale sont utilisées pour le slider. (voir l'option image-extension)

Les options  sort-by, sort-order ont pour but de trier les images par nom (name), par date (date) ou d'une façon aléatoire (random).
Il est possible d'indiquer le nombre d'images à afficher avec l'option maxi.

Si l'option legend est présente, une version "humanisé" avec mise en forme (optionnelle) selon l'option legend-template du nom du fichier sera inscrite au-dessous de l'image. plus d'infos 

L'option zoom-suffix permet de filter les images. 
Exemple zoom-suffix=-mini pour toutes les images se terminant par '-mini'. zoom-suffix=!-mini pour toutes les images ne se terminant pas par '-mini'. 
Cette option permet d'utiliser le plugin LM-Zoom pour afficher l'image dans une lightbox.

Le contenu entre shortcodes

Les blocs de premier niveau du contenu entre les shortcodes

précsuiv

un texte rouge dans une balise DIV

Un texte dans une balise SPAN

{up slider-tiny}
   {up div=bd-rouge tc}un texte rouge dans une balise DIV{/up div}
   {up html=img | src=images/actions-demo/slider/1/Basilique-Saint-Pierre-Vatican.jpg}
   {up div=bd-vert tc}Un texte dans une balise SPAN{/up div}
{/up slider-tiny}

J'ai utilisé des actions UP pour bien montrer les balises utilisées. Il est évident que vous pouvez saisir le contenu en WYSIWYG, en HTML, 
La hauteur est calculée sur le premier élément affiché et réajusté ensuite. 

Les blocs entre {===}

L'inconvénient de la méthode précédente est que la structure des blocs n'est pas visible en WYSIWYG

précsuiv

Un premier texte

Avec une légende pour image

Un troisième texte centré

en hauteur

{up slider-tiny}
{up div=bg-beige}Un premier texte{/up div}
{===}
{up html=img | src=images/actions-demo/slider/1/Basilique-Saint-Pierre---Vatican.jpg}
<p>Avec une légende pour image</p>
{===}
{up div=bg-beige;bd-rouge;width:100%;height: 100%;align-content: center;}
<p>Un troisième texte centré</p>
<p>en hauteur</p>
{/up div}
{/up slider-tiny}

Remarquez l'ajout de style pour occuper tous l'espace et centrer le contenu du troisième élément.

L'aspect du slider

L'organisation des éléments

précsuiv

Il est possible d'afficher un ou plusieurs éléments en même temps avec  l'option items.

Le nombre d'éléments déplacés simultanément est défini par l'option slideBy.

L'élément affiché en premier peut-être défini avec l'option startIndex.

{up slider-tiny=images/actions-demo/gallery/infinite
 | items=3
 | slideBy=2
 | startIndex=8
}

{up slider-tiny=images/actions-demo/gallery/infinite | items=3
 | center | gutter=10 | edgepadding=30}

gutter ajoute une marge en pixels entre chaque éléments, quant à lui, edgePadding laisse voir une partie des éléments latéraux.

Par défaut, le premier élément est affiché sur la gauche, mais il est possible de le center avec center

précsuiv

précsuiv

Par défaut, les éléments bouclent. Le premier est réafficher à la suite du dernier.

Vous pouvez préférer revenir au premier après le dernier. C'est possible avec l'option rewind.

Dimensions et position des items

Responsive oblige, la dimension des éléments est réduite pour s'adapter à la place disponible, mais jamais augmentée. 

Par défaut la hauteur du slider est celle du plus grand de ses éléments. Ceux-ci sont centrés verticalement.
En ajoutant une option autoHeight, la hauteur du slider sera celle de l'élément affiché.

Les options slider-style et  item-style permettent de personnaliser le rendu

{up slider-tiny | items=2
 | slider-style=background-color: tan; text-align:center}
{up lorem-place=100x100 | bg-color=brown | text-color=white}
{up lorem-place=600x300 | bg-color=plum}
{up lorem-place=800x200 | bg-color=lavender}
{up lorem-place=600x100 | bg-color=plum}
{up lorem-place=800x400 | bg-color=lavender}
{/up slider-tiny}

slider-style permet d'ajouter un fond autour des items moins haut et centre les items moins larges.

précsuiv

{up slider-tiny | items=1 
 | item-style=bd-red
 | autoHeight}
{up lorem-place=100x100 | bg-color=brown | text-color=white}
{up lorem-place=600x300 | bg-color=plum}
{up lorem-place=600x200 | bg-color=lavender}
{up lorem-place=600x100 | bg-color=plum}
{up lorem-place=800x300 | bg-color=lavender}
{/up slider-tiny}

autoheight ajuste la hauteur à l'élément affiché. 
item-style ajoute une bordure aux éléments

précsuiv

Les boutons précédent-suivant

Par défaut, le script ajoute cette structure HTML pour les boutons. Pour ne pas afficher ces boutons, ajoutez l'option controls=0.
L'option controlsPosition (top, bottom ou center) permet de choisir la position verticale par rapport au slider.

Pour modifier le texte des boutons, on utilise les options btn-prev et btn-next. Ce peut être du texte simple ou du BBcode.

{up slider-tiny=images/actions-demo/gallery/infinite | items=4 | slideBy=4
 | btn-prev=[span class="fa fa-angle-double-left"][/span]
 | btn-next=[span class="fa fa-angle-double-right"][/span]
 | controlsPosition=bottom
 | css-head=#id .tns-bloc-buttons button[background:green]
}

On utilise des icônes Font-awesome pour le contenu des boutons placés au-dessous du slider avec l'option controlsPosition

Pour agir sur le style des boutons, utilisez le sélecteur CSS .tns-bloc-buttons button comme dans l'exemple ci-dessus.

controlsPosition = center

Cette position, non prévue par le script d'origine, permet de placer les boutons de chaque côté au milieu du slider. 

{up slider-tiny=images/actions-demo/gallery/infinite | items=4 | slideBy=4
 | btn-prev=[span class="fa fa-angle-double-left"][/span] | btn-next=[span class="fa fa-angle-double-right"][/span]
 | controlsPosition=center}

Vous pouvez agir sur le style avec les sélecteurs .tns-controls et [data-controls="prev"]

Exemple pour ajuster les positions verticale et horizontale et changer le look des boutons. 

{up slider-tiny=images/actions-demo/gallery/infinite | items=4 | slideBy=4
 | btn-prev=[span class="fa fa-angle-double-left"][/span] | btn-next=[span class="fa fa-angle-double-right"][/span]
 | controlsPosition=center
 | css-head=#id .tns-controls[top: calc(50% -2.4rem); opacity:1;]
#id .tns-bloc-buttons button[background-color:#ccc;color:var(--c1);font-size:2rem]
#id button\[data-controls="prev"\] [left:-20px;border-radius:10px 0 0 10px]
#id button\[data-controls="next"\] [right:-20px;border-radius:0 10px 10px 0]
#id button\[data-controls="prev"\]:hover[color:red]
#id button\[data-controls="next"\]:hover[color:red]}

L'indicateur de pagination

Des petits ronds, affichés au-dessus ou au-dessous des items, permettent de visualiser la position de la page par rapport à l'ensemble des pages.
Un clic sur l'un de ces points permet de se déplacer vers la page correspondante.

L'option nav active l'affichage et la navigation. nav=0 pour les masquer. La position est déterminée par navPosition=top ou bottom

précsuiv

{up slider-tiny={up lorem-flickr=joomla | width=600 | height=400  | number=12 | mode=dir}
 | items=2 | slideBy=1 | navPosition=bottom}

L'exemple ci-contre utilise les nouveautés de l'action lorem-flickr qui permet de récupérer plusieurs images de la taille désirée sur un thème (ici joomla)

Il y a 6 petits ronds qui correspondent aux 12 images affichées par groupe de 2 (soit 6 pages).

Note : les ronds utilisent la couleur secondaire du template et le rond actif la couleur primaire.

Modifier le style 

précsuiv

{up slider-tiny={up lorem-flickr=joomla | width=600 | height=400 | number=12 | mode=dir}
 | items=2 | slideBy=1 | navPosition=bottom
 | css-head=#id .tns-bloc-nav > \[aria-controls\][width:15px;height:15px;border-radius:4px;background:violet]
#id .tns-nav-active[background:red !important]
}

La classe tns-bloc-nav englobe tous les points. 
Pour modifier la forme des points, il faut agir sur le sélecteur css
.tns-bloc-nav > [aria-controls].
Le point actif a la classe tns-nav-active

Des vignettes à la place des points

Pour afficher une image miniature à la place des ronds, il faut ajouter l'option navAsThumbnails au shortcode. 
Cette option a priorité sur l'option nav. La notion de page est conservée pour les déplacements, mais chaque image est affichée individuellement. 

{up slider-tiny={up lorem-flickr=joomla | width=600 | height=400 | number=12 | mode=dir}
| items=2 | slideBy=1 | navPosition=bottom |  navAsThumbnails | controls=0}

Personnaliser les vignettes

La classe tns-bloc-nav-thumbnails permet de personnaliser l'aspect des vignettes.

Dans l'exemple ci-dessus, on colle les vignettes au slider, on réduit la hauteur à 40px et on met une bordure rouge arrondie avec un zoom sur l'image active.

css-head=#id .tns-bloc-nav-thumbnails[margin-top:-25px;margin-bottom:25px]
#id .tns-bloc-nav-thumbnails img[max-height:40px;margin-left:2px]
#id .tns-bloc-nav-thumbnails img.tns-nav-active[border:red 2px solid;border-top:none;border-radius:0 0 5px 5px;zoom:1.5;margin-top:16px]

1 / une marge top négative rapproche les vignettes du slider. la marge bottom éloigne le contenu après le slider

2 / la hauteur des vignettes est réduites. Une marge est ajoutée entre chaque image

3 /  la vignette actiive est agrandie de 150% et décalée vers le bas. Une borture rouge arrondie est ajoutée

Autoplay

précsuiv

{up slider-tiny=images/actions-demo/gallery/infinite | items=4
 | autoplay
 | autoplayPosition=center
 | controlsPosition=center}

Vous pouvez masquer le bouton marche/arrêt avec l'option autoplayPosition=none.
Vous pourrez toujours arréter le changement automatique :

• lors du survol de la souris avec l'option autoplayHoverPause
• lorsque le slider perd le focus avec autoplayResetOnVisibility.

La direction du changement de page se définit par autoplayDirection=forward ou backward.

{up slider-tiny=images/actions-demo/gallery/infinitee | items=4
 | autoplay
 | autoplayPosition=none
 | autoplayHoverPause
 | autoplayDirection=backward
 | btn-prev=[span class="fa fa-angle-double-left"][/span] | btn-next=[span class="fa fa-angle-double-right"][/span]
 | controlsPosition=center}

Par défaut, ce bouton bascule entre les caractères Unicode ⏵ (⏵) et  ⏸ (⏸).
L'option autoplayText  permet de les changer. Exemple : autoplayText=marche,arrêt

Le style du bouton peut être personnalisé en jouant sur le sélecteur CSS : .tns-autoplay button

.tns-autoplay button{background-color:red}

Animation

Par défaut, le mode=carousel fait glisser les éléments lors d'un changement. Vous pouvez choisir le mode=gallery pour une transition animée.

précsuiv

{up slider-tiny=images/actions-demo/slider/1
  | items=3 | mode=gallery | nav=0 | controlsPosition=center}

En dehors du mode=gallery, trois options gère l'animation :

• animateDelay qui fixe le délai entre chaque animation
  
• animateIn et animateOut pour l'apparition et la disparition d'un élément. L'argument est le nom de la classe. De base, uniquement 2 classes sont disponnibles : tns-fadeIn et tns-fadeOut

Personnaliser les animations

Si comme moi, vous ne trouvez pas les animation de base très jolies, il est possible d'utiliser des classes externes à UP.

La première étape consiste à importer une feuille de style. Cela peut être celle fournie par animate.style.Cette page vous permet de tester les effets proposés et de récupérer le nom de la classe.

Pour cela, le plus simple est de faire appel à l'action addfilehead de UP. Cette méthode permet de charger ce fichier uniquement lorsque vous en avez besoin.

{up addfilehead=//cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css}

La deuxière et dernière est d'indiquer le nom des classes aux options animateIn et animateOut.

précsuiv

{up slider-tiny=images/actions-demo/slider/1 | animateDelay=200 | animateIn=animate__bounce | items=3 | mode=gallery| gutter=10 | nav=0 | controlsPosition=center | css-head=#id button\[data-controls="prev"\][left:-10px] }

précsuiv

{up slider-tiny=images/actions-demo/slider/1 | animateDelay=200 | animateIn=animate__fadeInDown | animateOut=animate__fadeInUp | items=3 | mode=gallery| gutter=10 | nav=0 | controlsPosition=center | css-head=#id button\[data-controls="prev"\][left:-10px] }

Note : l'option gutter ajoutant une marge à droite des éléments, j'ai ajouté une option css-base pour décaler le bouton "prec".

Lightbox

Il est possible d'agrandir toutes les images du slider dans une fenêtre modale en incluant l'action slider-tiny dans une action modal.

précsuiv

{up modal=img}
  {up slider-tiny=images/photos/3
    | items=2 | slideBy=1 | navPosition=bottom
    | zoom-suffix=-mini}
{/up modal=img}

L'option  permet d'utiliser uniquement les images d'un dossier dont le nom se termine par ce terme.

La méthode zoom-suffix, utilisée par plusieurs actions, permet d'exploiter deux versions d'une image :
une version réduite pour le slider et une version plus grande pour la lightbox modale.
La grande image sera chargée uniquement lorsque l'utilisateur cliquera sur la vignette, ce qui garantit à la fois rapidité et qualité !

Vous avez la liberté de créer ces deux images selon vos préférences.
Veuillez toutefois vous assurer que les dimensions des petites images soient égales ou supérieures à celles du slider, car ce dernier n'agrandit jamais les images.

Une astuce : si le nombre d'items affichés est égal à celui des images du dossier, aucune navigation ne sera visible.
Un moyen rapide pour faire un bandeau d'images avec lightbox.

{up modal=img}{up slider-tiny=images/photos/3 | items=4 | zoom-suffix=-mini}{/up modal=img}

précsuiv

Le responsive

Il est possible de définir un nombre illimité de breakpoints (points de rupture) pour les options : startIndex, items, slideBy, speed, autoHeight, fixedWidth, edgePadding, gutter, center, controls, controlsText, nav, autoplay, autoplayHoverPause, autoplayResetOnVisibility, autoplayText, autoplayTimeout, touch, mouseDrag, arrowKeys, disable

L'action UP slider-tiny propose 2 méthodes pour gérer le responsive.

❶ Cette méthode vous propose d'indiquer pour certaines options une liste de valeur pour des breakpoints prédéfinis.

La première étape est de définir les breakpoints avec l'option responsive-breakpoint en indiquant les valeurs séparées par des virgules. Un exemple pour mobile, tablette et grand écran. Vous pouvez définir autant d'étapes que vous désirez. L'important pour se relire facilement, c'est qu'elles soient dans l'ordre.

responsive-breakpoints=0, 480, 760, 960,1200

La deuxième étape est d'indiquer la liste des valeurs séparées par des virgules pour les options. 

items=1, 2, 3, 4, 5 
slideBy=1,2,page
nav=0, 0, 1
gutter= , 5, 10 
edgepadding=0, 20, 30, 40

Pour items, nous indiquons les 5 valeurs. 
Pour slideBy, nous aurions pu utiliser uniquement page qui correspond au nombre d'éléments défini par items.
Les indicateurs de navigation (nav) ne sont pas affichés en dessous de 760px
Pour gutter, nous aurions pu mettre les valeurs pour les 5 cas (0,10px,10px). La forme utilisée permet de définir uniquement les valeurs utilisées, soit la valeur par défaut (0) pour les petits écrans, 5px pour les tablettes et grands écrans (plus grand que 760px)
edgepadding ne doit pas vous poser de problème de lecture

précsuiv

❷ La deuxième méthode est d'utiliser l'option responsive en indiquant la chaine json attendu par le script. 

Exemple pour avoir 1 item sur mobile, 3 items avec une marge de 10px sur tablette (écran plus grand que 480px) et 5 items sur les écrans plus large que 960px.

précsuiv

responsive=[0:[items:1],480:[items:3,gutter:10px],960:[items:5]]

On indique pour chaque largeur d'écran (breakpoint) la valeur des options.
Bien que le script dispose d'un mécanisme pour remettre les breakpoints dans l'ordre croissant, il est préférable de les passer dans l'ordre. Ne serait-ce que pour se relire plus facilement

Cette méthode permet l'utilisation de toutes les options du script, même si UP ne les propose pas. Attention au respect des minuscules/majuscules dans le nom des options

L'utilisateur

3 options permettent de règler le comportement du slider vis à vis de l'utilisateur

• arrowKeys : non activée par défaut, elle d'utiliser les touches fléchées pour changer d'élément.
• touch : la détection d'entrée est active pour les appareils tactiles
• mouseDrag : non activée par défaut, elle autorise le changement d'élément en le faisant glisser.

précsuiv

{up slider-tiny=images/actions-demo/gallery/infinite | items=3 | arrowkeys | mousedrag }

En cas de problème

L'option debug affichera le code HTML créé par l'action, ainsi que la chaîne d'initialisation du script. 
Des informations utiles pour déceler une erreur ou vous faire aider.

legend-template=[span style="color:yellow;font-weight:bold"]##1##[/span][br]##2##