Voilà un petit slider construit avec html5 et JQuery. Très sobre et très simple, ce slider se veut léger. Le plugin en version compressé pèse un poil plus d’1ko.
Pour ce plugin j’ai utilisé les balises <figure> et <figcaption> proposés par html5. Les images de votre slider devront être dans une div conteneur, et chacune devra être ajouter de la manière suivante :
<figure>
<img src="img/1.jpg" alt=""/>
<figcaption>Couché de soleil</figcaption>
</figure>La balise figure est un conteneur, regroupant l’image()<img> et sa légende(<figcaption>).
Coté javascript/JQuery, c’est très simple. On positionne les images les unes au dessus des autres avec JQuery. De cette manière, si javascript est désactivé, on aura un affichage correct (enfin, un affichage qui me convient, en tant que développeur... :) )
Si la div contenu à l’id #slideMe, on appelle le plugin de la manière suivante :
$('#slideMe').lightSlider();
});
On a juste deux options sur ce plugin :
- texteBoutonPrec : Le texte du lien pour passer à l’image précédente
- texteBoutonSuiv : Le texte du lien pour passer à l’image suivante
Pour les impatients, voilà la démo : http://www.demo.creamama.fr/lightSlider/
Pour les plus intéressés, il reste encore quelques lignes ci-dessous :
Je me suis intéressé au début de cette semaine à html5 history. Après avoir lu pas mal d’articles, de docs et en avoir compris une partie, je voulais essayer de le mettre en pratique. Ce slider est là pour ça. Il servira de base pour une démo à venir. Mais tant qu’à faire d’avoir développé ce petit slider, autant le partager :)
Ces derniers temps, on a vu passait pas mal de slider avec des effets assez impressionnants (par exemple : chopSlider), mais du coup, beaucoup plus gourmand en ressource. L’idée de se slider, c’est de re rester sobre, simple et ultra léger.
N’hésitez pas à le télécharger, le modifier, vous l’approprier, ou donner votre avis !
-
- Démo lightSlider
-
- script lightslider compressé
-
- script light slider
Restez un peu plus longtemps, et prenez le temps de lire aussi :
Aout
A Propos
Je suis un concepteur et développeur web à Grenoble. Je développe essentiellement avec le CMS Spip. Actuellement en contrat chez Territorial, je continue ma veille technologique, et vous fais partager ce que je trouve utile et pratique.
