xlidejs est un slider/carrousel léger, flexible, accessible et parfait pour n'importe quel site Web. Il est facile à utiliser et à configurer, et il a fière allure sur n'importe quel appareil.
Vous pouvez directement telecharger xlidejs en appuyant sur ce bouton :
Apres avoir telecharge les fichiers, mettez les dans un repertoire accessible a partir de le racine du projet ( en general '/assets/' ). Puis, incluez le fichier xlidejs sur votre page avec la balise script comme cela:
<script src="/assets/xlide.js"></script>
Si vous preferez les cdn, vous pouvez utiliser le code suivant:
<script src="https://cdn.jsdelivr.net/gh/dev0ps221/xlidejs/dist/xlide.js"></script>
Maintenant vous devez lier le fichier xlide.css au projet ainsi:
<link rel="stylesheet" href="/assets/xlide.css"/>
Bien ! vos dependences sont pretes, creez votre premier "xlide"
Sur votre fichier html, vous allons rajouter ce bout de code, cet element va contenir votre slider:
<div id="my-xlide" style="height:300px;"></div>
C'est tout. En effet, c'est tout cote html pour votre slider.
(Notez l'attribut style ici, vous devez definir les dimensions de votre element, le slider s'adaptera automatiquement a la taille definie. Si vous omettez de le faire, il risque de ne pas s'afficher)votre action suivante repose sur 2 concepts: la selection et la configuration:
la selection: la designation de l'element qui va contenir votre slider.
la configuration: la configuration de votre slider.
xlide .
Cette fonction prend 2 arguments :
target : le selecteur de l'element cible, ou l'objet HTMLElement de l'element cible lui-meme.
options : un objet comprenant les options du slider (tel que les images et les parametres de lecture)
Vous etes pret ? allons y rajoutons ce code javascript:
const imgs = ['slide1.png','slide2.png'] //les urls des images
const selector = '#my-xlide'
const options = { images:imgs, autoplay:1 }
const slide = xlide(selector,options)
Plus simplement, vous pouvez ecrire:
const imgs = ['slide1.png','slide2.png'] //les urls des images
const slide = xlide('#my-xlide',{ images:imgs, autoplay:1 })
Pour une meilleure prise en main, la fonction renvoie un objet xLide qui vous permet de manipuler le slider et de le configurer a votre guise.
C'est la principale raison pour laquelle vous affectez sa valeur de retour a votre variable slide const slide = xlide(..)
xlide sont facultatifs.
Vous auriez tres bien pu appeler la fonction sans argument. Dans ce cas la selection et la configuration se font respectivement avec les methodes appendTo , addImages et addOption de votre objet xLide
const slide = xlide()
slide.addImages(['slide1.png','slide2.png'])
slide.addOption('autoplay')
slide.appendTo(document.querySelector('#my-xlide'))
Vous pouvez meme creer un slider en une ligne
//bonus
const slide = xlide('#my-xlide').addImages(['slide1.png','slide2.png']).addOption('autoplay')
Voici une liste des options actuellement disponible a partir de la version actuelle de xlidejs
Pour ajouter une option a votre slide vous utiliserez la methode addOption qui prend `option` (le nom de l'option) et `value` la valeur voulue comme parametres : slide.addOption(option,value)
Par exemple si je veux changer la duree entre deux transitions:
slide.addOption('interval',3)Notez que `value` a pour valeur par defaut true, qu'importe l'option specifie, voyez le code ci-dessous
slide.addOption('previews',true)Il peut etre ecrit ainsi
slide.addOption('previews')site web en construction