Cycle (Experimental)
Permet de placer un banner animé avec des slides contenant des images et du texte. Le comportement est proche de celui de l'item "banner", avec les différences suivantes:
- il y a des flèches à gauche et à droite, ainsi que des boutons en bas de l'image, qui permettes au visiteur de faire défiler les images à sa convenance - il y a un lien, et un textearea qui permet de rendre toute la zone de texte cliquable
<item name='banner' type='cycle'>
</item>
</item>
| attribut | défaut | description |
|---|---|---|
| name | identification unique | |
| type | type d'item ='cycle' | |
| preset | cover (couvre la surface jusqu'au bas de la fenĂŞtre) proportional (conserve le rapport largeur/hauteur de l'image avec le rapport largeur/hauteur le plus grand) | |
| min-height | hauteur minimale en pixel (uniquement pour le mode proportional pour le moment) | |
| trans-type | o | type de transition 'o'=fondu, 'v'=vertical, 'h'=horizontal |
| duration | 4000 | nb de milliseconde d'affichage d'un slide |
| trans-ratio | 25 | pourcentage de la durée d'un slide consacré à la transition |
| height | 680 | hauteur du banner en pixel (plus pris en compte? Ă tester) |
| box-height | 410 | hauteur du textbox en pixel |
| box-width | 330 | largeur du textbox en pixel |
| background-color | rgba(0,0,0,0.8) | couleur d'arrière plan du textbox |
| color | #ccc | couleur du texte du textbox |
| icon | plus-sign-rounded | nom de l'icĂ´ne svg |
| controls | position | type de contrôles affichés (plusieurs possible, séparés par des virgules: position,navigation,navpos,playstop,all) |
| run-mode | auto | mode de fonctionnement automatique (auto) ou manuel (manual) |
| level | 0 | niveau de dépendance à la profondeur du site |
Valeurs pour l'attribut controls
| position | Uniquement les boutons de position (ronds en bas) |
| navigation | Uniquement les flèches latérales |
| navpos | Boutons de navigation et de position |
| playstop | Uniquement le bouton play/stop |
| all | Tous les contrĂ´les |
Pour faire un cycle banner en cover
Il faut ajouter l'attribut preset='cover'
Dans ce cas il faut veiller Ă ce qu'aucun style ne limite la hauteur du banner, en retirant des styles du genre:
<css breakpoint='main' selector='.cycleitem' height='360px!important' />
<css breakpoint='phone' selector='.cycleitem' height='360px!important' />
<css breakpoint='phone' selector='.cycleitem' height='360px!important' />
Pour maintenir les flèches latérales visible sur mobile il faut:
<css breakpoint='main' selector='.action-buttons' display='block!important' />
Editer