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 :

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>

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

Ensuite :

<div id="s3slider">
<ul>
<ul>
 	<li class="s3sliderImage"><img src="monimage.png" />
Your text comes here</li>
 	<li class="s3sliderImage"><img src="monimage2.png" />
Your text comes here</li>
</ul>
</ul>
<div class="clear s3sliderImage"></div>
</div>

Les blocs qui deviendront un slider. Images + textes.

Puis :

#s3slider {
width: 400px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
width: 400px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

Le code css d’exemple à modifier comme bon vous semble.

Et pour finir :

$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});

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 :