SLIDE 1
Sliders
Créez des diaporamas interactifs et accessibles simplement.Vue d'ensemble
Un slider ou carrousel, est une région de la page qui peu agir comme un diaporama, permettant aux utilisateurs de parcourir un tas de contenus qu'il ne serait normalement pas possible de tenir dans le même espace.
Le composant .slider de Sass Swing est piloté via un
script Javascript et est entièrement accessible pour les dispositifs tels que les lecteurs d'écran.
Vous pourrez faire animer, le carrousel, automatiquement et sur lui-même. Il prend également en charge le glisser-déposer sur mobile comme sur écran de bureau. Votre utilisateur pourra passer d'un slide à l'autre simplement avec son doigt.
Vous pourrez également afficher des indicateurs, pour vous déplacer dans le diaporama. Et également un bouton "play/stop" pour activer ou stopper le défilement automatique.
Pour mettre en place le slider, configurer son comportement et modifier les options d'affichage vous devrez passer par l'attribut data-js-slider.
Les options s'écrivent sous forme d'un JSON. Elles devront être englobées par des simples quotes tandis et les propriétés internes devront être englobées dans des doubles quotes.
Liste des options disponibles :
- showIndicators (true|false) : Affichage de la paginationvaleur par défaut : true
- indicatorsPosition ("top"|"bottom") : Placement vertical de la paginationvaleur par défaut : true
- showButtonAction (true|false) : Affichage du bouton "play/stop" (seulement si showPagination est activée) valeur par défaut : false
- showFocus (true|false) : Affiche le focus de la slide en coursvaleur par défaut : false
- slideByPage (true|false) : Active le défilement page par page valeur par défaut : false
- infinite (true|false) : Active le défilement infinivaleur par défaut : true
- autoplay (true|false) : Active le défilement automatiquevaleur par défaut : false
- direction (Number) : Choix de la direction du défilement. -1 défilement vers la droite. 1 défilement vers la gauchevaleur par défaut : 1
- startIndex (Number) : Numéro de la slide de départvaleur par défaut : 0
- intervalInMs (Number) : Intervalle en ms entre chaque défilementvaleur par défaut : 5000
- transitionSpeedInMs (Number) : Durée en ms de la transition entre chaque défilementvaleur par défaut : 300
- transitionTimingFunc (string) : Type de transition à utiliser MDN Référencevaleur par défaut : ease-in-out
Exemple :
<section class="slider" aria-label="Caroussel"
data-js-slider='{"autoplay": false, "startingSlide": 3,
"transitionTimingFunc": "cubic-bezier(0.2,-2,0.8,2)"}'>
<!-- ... -->
</section>La hauteur du carrousel, s'adapte automatiquement en fonction du contenu des slides et du nombre de slides affichés par page.
Pour contrôler la hauteur du carrousel, vous devrez configurer la variable css --slider-max-height
Pour contrôler le nombre de slides visibles, vous devez configurer la variable css --slides-per-page dans l'attribut style.
Par défaut, le nombre de slide visible est de 1.
Vous désirez afficher des informations au survol d'une slide ? Rien de plus simple Sass Swing met à votre disposition la classe .slider__slide__overlay. Il vous suffira d'ajouter un bloc
dans la slide. A vous de styliser celle-ci via une classe css personnalisée.
Vous pouvez contrôler l'affichage des boutons de navigations et les afficher au survol de la souris en ajoutant la classe .slider--showControlsOnHover.
Vous pouvez ajuster les marges externes horizontales, pour ajuster l'affichage grâce à la variable css --slider-horizontal-padding.
Vous pouvez choisir l'espacement entre chaque slide avec la variable --slide-gap. Et pour finir, vous pouvez ajuster l'alignement des indicateurs avec la variable --justify-indicators.
L'affichage des indicateurs est une boite "flexbox", les valeurs acceptées sont celle de justify-content MDN Référence
SLIDE 1
Le slider s'adapte automatiquement en fonction de la largeur de l'écran. Vous pouvez aller encore plus loin grâce au media-queries en prenant le contrôle des variables css comme par exemple --slides-per-page.
Pas besoin des boutons de contrôle suivant et précédent ? Simple il vous suffit de ne pas les inclure dans le code HTML. Dans le cas contraire, ceux-ci doivent être placés dans le bloc .slider__wrapper.
SLIDE 1