s3Slider – Plugin jQuery – Un slider simple pour vos sites web

Posted By Franck Pertegas on 15 Déc 2011 in Framework, Javascript, Programmation | 0 comments

Un petit article sur un plugin jQuery très simple, qui permet de mettre en place un slider pour vos sites web.

Vous le savez certainement, le site du Framework javascript jQuery et plus particulièrement la partie des plugins a été victime d’une malheureuse erreur de manipulation, faisant ainsi perdre une grande partie des plugins enregistrés sur le site de jQuery et ce, sur plusieurs mois (voir années). Ne vous étonnez donc pas si vous tombez sur un message de maintenance en vous rendant sur la partie plugins du site de jQuery. Tout ça pour vous dire qu’il est intéressant pour moi (et c’est le cas de pas mal d’acteurs du web) de vous dégoter des plugins jQuery et de vous les présenter, et ainsi d’avoir plusieurs sources disponibles pour ces derniers.

Bon, revenons en à notre plugin du jour, à savoir s3Slider, qui comme son nom l’indique est un slider. Un slider qui agrémentera vos sites web.

s3Slider-jQuery-plugin-js

Pour moi, le meilleur des sliders à l’heure actuel reste Skitter, mais certains d’entre vous auront peut être besoin de quelque chose de beaucoup plus basique et s3Slider peut répondre à ce besoin.

Voilà la manière de l’utiliser :

[pastacode lang= »markup » manual= »%3Cscript%20src%3D%22js%2Fjquery.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22js%2Fs3Slider.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E%20″ message= » » highlight= » » provider= »manual »/]

Code à insérer dans le head de votre fichier.

Ensuite :

[pastacode lang= »markup » manual= »%3Cdiv%20id%3D%22s3slider%22%3E%0A%3Cul%3E%0A%3Cul%3E%0A%20%09%3Cli%20class%3D%22s3sliderImage%22%3E%3Cimg%20src%3D%22monimage.png%22%20%2F%3E%0AYour%20text%20comes%20here%3C%2Fli%3E%0A%20%09%3Cli%20class%3D%22s3sliderImage%22%3E%3Cimg%20src%3D%22monimage2.png%22%20%2F%3E%0AYour%20text%20comes%20here%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3C%2Ful%3E%0A%3Cdiv%20class%3D%22clear%20s3sliderImage%22%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]
Les blocs qui deviendront un slider. Images + textes.

Puis :

[pastacode lang= »css » manual= »%23s3slider%20%7B%0Awidth%3A%20400px%3B%20%2F*%20important%20to%20be%20same%20as%20image%20width%20*%2F%0Aheight%3A%20300px%3B%20%2F*%20important%20to%20be%20same%20as%20image%20height%20*%2F%0Aposition%3A%20relative%3B%20%2F*%20important%20*%2F%0Aoverflow%3A%20hidden%3B%20%2F*%20important%20*%2F%0A%7D%0A%0A%23s3sliderContent%20%7B%0Awidth%3A%20400px%3B%20%2F*%20important%20to%20be%20same%20as%20image%20width%20or%20wider%20*%2F%0Aposition%3A%20absolute%3B%20%2F*%20important%20*%2F%0Atop%3A%200%3B%20%2F*%20important%20*%2F%0Amargin-left%3A%200%3B%20%2F*%20important%20*%2F%0A%7D%0A%0A.s3sliderImage%20%7B%0Afloat%3A%20left%3B%20%2F*%20important%20*%2F%0Aposition%3A%20relative%3B%20%2F*%20important%20*%2F%0Adisplay%3A%20none%3B%20%2F*%20important%20*%2F%0A%7D%0A%0A.s3sliderImage%20span%20%7B%0Aposition%3A%20absolute%3B%20%2F*%20important%20*%2F%0Aleft%3A%200%3B%0Afont%3A%2010px%2F15px%20Arial%2C%20Helvetica%2C%20sans-serif%3B%0Apadding%3A%2010px%2013px%3B%0Awidth%3A%20374px%3B%0Abackground-color%3A%20%23000%3B%0Afilter%3A%20alpha(opacity%3D70)%3B%20%2F*%20here%20you%20can%20set%20the%20opacity%20of%20box%20with%20text%20*%2F%0A-moz-opacity%3A%200.7%3B%20%2F*%20here%20you%20can%20set%20the%20opacity%20of%20box%20with%20text%20*%2F%0A-khtml-opacity%3A%200.7%3B%20%2F*%20here%20you%20can%20set%20the%20opacity%20of%20box%20with%20text%20*%2F%0Aopacity%3A%200.7%3B%20%2F*%20here%20you%20can%20set%20the%20opacity%20of%20box%20with%20text%20*%2F%0Acolor%3A%20%23fff%3B%0Adisplay%3A%20none%3B%20%2F*%20important%20*%2F%0Atop%3A%200%3B%0A%0A%2F*%0Aif%20you%20put%0Atop%3A%200%3B%20-%26gt%3B%20the%20box%20with%20text%20will%20be%20shown%20at%20the%20top%20of%20the%20image%0Aif%20you%20put%0Abottom%3A%200%3B%20-%26gt%3B%20the%20box%20with%20text%20will%20be%20shown%20at%20the%20bottom%20of%20the%20image%0A*%2F%0A%7D%0A%0A.clear%20%7B%0Aclear%3A%20both%3B%0A%7D » message= » » highlight= » » provider= »manual »/]
Le code css d’exemple à modifier comme bon vous semble.

Et pour finir :

[pastacode lang= »javascript » manual= »%24(document).ready(function()%20%7B%0A%24(‘%23s3slider’).s3Slider(%7B%0AtimeOut%3A%204000%0A%7D)%3B%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]
Et l’appel à la méthode du plugin afin de transformer tous ces jolis petit blocs en un slider simple (avec pour cet exemple, un changement d’image toutes les 4 secondes).

Retrouver le plugin sur cette page web

Pour visualiser les démonstrations.

Articles qui peuvent vous intéresser :