Préambule
Créer un slider d'images peux se faire de multiples manières différentes.
En voici une qui a la particularité d'être facile dans sa conception et mise en place sur votre site.
Comment allons-nous procéder ? Réfléchissons (un peu) avant de nous lancer dans le code.
L'idée sera ici de créer un bloc div qui contiendra notre slider, la particularité de ce bloc est que tout ce qui dépassera de celui-ci sera invisible.
Par exemple créons un bloc nommé "conteneur", donnons lui une taille de 500 pixels de large et 250 pixels de haut. Faisons en sorte que tout ce qui dépasse de ce bloc soit caché complètement. Voici le code HTML et CSS d'un tel bloc.
CODE HTML
<div id="conteneur"></div>
CODE CSS
#conteneur {
position:relative;
width:500px;
height:254px;
overflow:hidden; // C'est avec cet élément que nous allons cacher tout ce qui dépasse.
border:1px #000000 solid;
z-index:1500; // On place le bloc au premier plan
}
Maintenant que notre "conteneur" est prêt nous pouvons attaquer ce qui apparaitra à l'intérieur, nos images.
Créons un nouveau bloc qui contiendra nos images, nous nommerons celui ci "slider".
Ci-dessous le code CSS de notre nouveau bloc. A noter que ce nouveau bloc doit se trouver à l'intérieur de notre bloc "conteneur", sinon cela ne peux pas fonctionner :)
CODE HTML
<div id="conteneur">
<div id="slider"></div>
</div>
CODE CSS
#slider {
text-align:left;
position:relative;
/* Nous lui donnons une grande taille pour accueillir nos images sur une seule ligne
Vous pouvez bien sur adapter la taille selon le contenu que vous désirez afficher */
width:10000px;
z-index:1000; // On place le bloc au deuxième plan par rapport à "conteneur"
}
Dans ce nouveau bloc "slider" nous allons y mettre nos images
CODE HTML
<div id="slider">
<a href=""><img border="0" src="1.jpg" alt="" /></a>
<a href=""><img border="0" src="2.jpg" alt="" /></a>
<a href=""><img border="0" src="3.jpg" alt="" /></a>
<a href=""><img border="0" src="4.jpg" alt="" /></a>
<a href=""><img border="0" src="5.jpg" alt="" /></a>
</div>
En essayant tout de suite votre fichier vous devriez voir uniquement votre première image, les autres étant cachées par le overflow:hidden; du bloc div ayant pour id "conteneur".
Maintenant nous pouvons animer tout ceci avec quelques lignes de code jQuery
La partie jQuery
Pour animer à droite et à gauche notre bloc slider nous auront besoin de deux boutons (ou deux images).
L'important ici est de leur donner un id unique pour pouvoir interagir avec jQuery
CODE HTML
<button id="bmoins">moins</button>
<button id="bplus">plus</button>
Ci-dessous, le script lorsque nous cliquerons sur le bouton "plus". Nous voulons que notre bloc slider se déplace de 500px (taille de mes images) vers la gauche.
CODE JAVASCRIPT
$('#bplus').click(function() {
/* Animation du bloc slider de -500px par rapport à sa position actuelle
Nous jouons avec sa valeur CSS "left". Pour enlever 500px de sa valeur actuelle vous
devez faire -=500px et non -500px. 300 étant la durée de l'animation et swing l'effet easing
L'effet swing est un plugin jQuery, ce plugin est intégré dans notre démo, vous pourrez le télécharger
dans les sources mis à votre disposition */
$("#slider").animate({left: "-=500px"}, 300, 'swing');
});
Faisons de même pour le bouton "moins".
CODE JAVASCRIPT
$('#bmoins').click(function() {
/* Animation du bloc slider de +500px par rapport à sa position actuelle
Nous jouons avec sa valeur CSS "left". Pour ajouter 500px de sa valeur actuelle vous
devez faire +=500px et non +500px. 300 étant la durée de l'animation et swing l'effet easing
L'effet swing est un plugin jQuery, ce plugin est intégré dans notre démo, vous pourrez le télécharger
dans les sources mis à votre disposition */
$("#slider").animate({left: "+=500px"}, 300, 'swing');
});
C'est très bien tout ça mais quand nous arriverons à la dernière image comment retourner au début ?
Et oui car à ce niveau la nous lui disons d'avancer ou reculer de 500 pixels à droite et à gauche mais si j'appuie dix fois sur "plus" ?? :)
Mettons donc en place un système qui va compter le nombre d'images insérés.
jQuery met à disposition $().lenght qui va nous aider à compter le nombre d'élément dans un bloc définit.
CODE JAVASCRIPT
/* Nous définissons une variable v2 qui correspond au nombre d'images que contient notre bloc slider */
var v2 = $("#slider img").length;
/* Définissons une autre variable qui nous serviras à connaitre la position actuelle de slider */
var count1 = 0;
Maintenant que nous connaissons le nombre d'images agissons sur les boutons lors du clic.
Lorque je vais cliquer sur un bouton je vais incrémenter ou décrémenter ma variable count1 de manière à savoir ou se trouve mon slider. Si celui ci est égale à v2 ($().lenght) c'est que je suis arrivé au bout, je dois donc faire marche arrière :)
CODE JAVASCRIPT
// lorsque je clic sur le bouton "plus"
$('#bplus').click(function() {
// j'incrémente ma var count1 de 1
count1++;
// Si ma variable count1 est également à v2 je remet mon slider au début => left:0;
if(count1 == v2){
$("#slider").animate({left: "0px"}, 300, 'swing');
// Je n'oublie pas de réinitialiser ma variable count1 à zéro car je suis revenu au début
count1 = 0;
}else{
// Sinon je déplace de 500 px vers la gauche comme d'habitude
$("#slider").animate({left: "-=500px"}, 300, 'swing');
}
});
Pour le bouton "moins" c'est un peu différent, car autant revenir au début du slide est facile car cela correspond toujours à 0 quelques soit le nombre d'images, autant pour le contraire est plus délicat.
Et oui nous avons vu ci-dessus comment retourner à notre première image si nous arrivions à la dernière image de notre slider. Mais si je suis sur ma première image et que je clic sur "moins", ou notre slider va t'il aller ? Pour connaitre l'emplacement exact de la dernière image nous allons procéder comme ceci.
CODE JAVASCRIPT
$('#bmoins').click(function() {
/* Nous définissons une variable Left qui correspond à la valeur CSS actuelle "left" du bloc slider.
Nous utilisons parseInt car sans cela la variable aurait pour valeur "500px" par exemple
et nous devons récupérer "500" */
var Left = parseInt($("#slider").css("left"));
// Si la position de slider est 0
if(Left == 0){
/* On cherche la position de la denrière image
v2 multiplié par 500 moins 500 */
var fin = v2*500-500;
// on connait la position de la denière image alors on déplace avec animate
$("#slider").animate({left: "-"+fin+"px"}, 300);
// On oublie pas de donner la bonne valeur à count1
count1 = v2-1;
}else{
// sinon on prend le cours normal on décrémente count1 et on déplace slider de 500px vers la droite.
count1--;
$("#slider").animate({left: "+=500px"}, 300);
}
});
Et voila nous avons un slider simple et fonctionnel :)
Allons un peu plus loin
Essayons au lieu d'avoir un bouton "plus" et "moins" de créer des vignettes automatiquement selon le nombre d'images insérées et attribuons leurs la fonction adéquates pour l'animation.
Cette méthode est bien plus sympa car elle nous permet de supprimer la variable count1 définit dans l'exemple ci-dessus. Nous allons donc créer un nouveau bloc div ayant pour id "lien".
CODE HTML
<div id="lien"></div>
Ce nouveau bloc va contenir nos liens pour l'animation du slider. Nous avons vu plus comment récupérer le nombre d'images dans notre slider avec lenght. Nous allons nous en servir pour cette méthode, voyons un peu le code jQuery.
CODE JAVASCRIPT
// Je réécris la variable v2 ici mais elle a déjà été définit dans notre exemple ci-dessus.
var v2 = $("#slider img").length;
/* Nous créons un boucle for simple :
Nous définissons une variable i qui est égale à 0, tant que i est inférieur ou égale à v2
nous executons le code dans la boucle, puis nous incrémentons i de 1, pour qu'un moment donné on sorte
de la boucle :) */
for(var i = 1; i <=v2; i++)
{
/* On affiche dans le bloc div "lien" le code entre parenthèse.
le "rel" est ici important car nous allons l'exploiter dans la fonction ci-après.
Vous remarquez que "rel" prend la valeur de "i"
Nous donnons également une class CSS nommé "slide" à notre lien (voir le code CSS dans le bloc en dessous */
$("#lien").append(""+i+"");
}
/* Lorque je clic sur un élément "a" ayant comme class "slide" */
$('a.slide').click(function() {
/* Je récupère la valeur de "rel" avec attr(), this correspond à l'élément sur lequel j'ai cliqué.*/
var image = $(this).attr("rel");
/* J'ai la position de l'image (rel), je peux donc faire un calcul simple pour l'animation
numéro de l'image multiplié par la longeur d'une image (ici 500px) moins une image. */
var animation = image*500-500;
/* On veux déplacer le slider sur la gauche donc on met un "-" */
$("#slider").animate({left: "-"+animation+"px"}, 300, 'swing');
});
CODE CSS
.slide
{
cursor:pointer;
}
Je voudrais revenir sur append() de jQuery, il fait la même chose que html() à une différence prêt et fondamentale. Il va "incrémenter" le bloc défini alors que html() va le remplacer. Avec append et notre boucle for nous pouvons donc insérer dans notre bloc les nombres de liens nécessaires.
A noter que j'ai choisi dans notre exemple un lien texte avec des numéros 1,2,3 ... mais il était possible aussi de mettre des images à la place. L'important ici étant le "rel".
CODE JAVASCRIPT
for(var i = 1; i <=v2; i++)
{
/* Avec image au lien d'un texte */
$("#lien").append("
");
}
Autre méthode
Essayons en gardant la même structure de changer le style d'apparition des images. Par exemple un fondu sortant sur l'image actuelle et un fondu entrant sur la nouvelle image. L'idée est de garder la structure actuelle, c'est à dire de déplacer le bloc slider sur la droite ou sur la gauche, mais si nous cachions d'abord l'image ? Puis nous appliquerons l'animation du slider (invisible) et nous ré-afficherons le slider. Qu'en pensez-vous ? on essaye ?
La méthode est simple, nous allons utilisez les callbacks de fadeOut et animate pour gérer notre animation.
1 - On compte le nombre d'images
2 - On boucle pour afficher les liens 1,2,3 ...
3 - Lors du clic on lance le fadeOut
4 - Le fadeOut est terminé, le callback s'exécute (animate se lance)
5 - A la fin d'animate on lance un autre callback pour ré-afficher le slider.
6 - C'est tout :)
CODE JAVASCRIPT
var v2 = $("#slider img").length;
for(var i = 1; i <=v2; i++)
{
$("#lien").append(""+i+" ");
}
$('a.slide').click(function() {
var image = $(this).attr("rel");
var animation = image*500-500;
$("#slider").fadeOut("fast", function() {
$("#slider").animate({left: "-"+animation+"px"}, 300, function() { $("#slider").fadeIn("fast"); });
});
});
Slider automatique ?
Dans cette partie du cours nous allons voir comment automatiser le slider. Voici le code:
CODE JAVASCRIPT
/* On compte le nombre d'images de notre div slider*/
var v2 = $("#slider img").length;
/* Nous devons définir une variable count pour connaitre la position du slider
comme dans notre premier exemple */
var count = 1;
/* Nous créons une variable qui lance un setinterval
setInterval initialise un action qui sera répétée toutes les x milisecondes (ici 3000 soit 3 secondes) */
var anime_slider = setInterval(function()
{
/* action réalisée toutes les 3000 milisecondes
si count est égale au nombre d'image (v2) on reviens au début */
if(count == v2){
$("#slider").fadeOut("fast", function() { $("#slider").animate({left: "0px"}, 300, function() { $("#slider").fadeIn("fast"); });});
count = 1;
}else{
$("#slider").fadeOut("fast", function() { $("#slider").animate({left: "-=500px"}, 300, function() { $("#slider").fadeIn("fast"); });});
count = count+1;
}
}, 3000);
/* Lors du clic sur le bloc div #stop on stop le setinterval avec clearInterval */
$("#stop").click(function()
{
clearInterval(anime_slider);
});
Si vous ajoutez ce code à votre slider il ne faut pas oublier de stopper l'interval lors du clic sur les boutons 1,2,3 ...
CODE JAVASCRIPT
$('a.slide').click(function() {
clearInterval(anime_slider);
var image = $(this).attr("rel");
var animation = image*500-500;
$("#slider").fadeOut("fast", function() {
$("#slider").animate({left: "-"+animation+"px"}, 300, function() { $("#slider").fadeIn("fast"); });
});
Pour stopper le slider rien de plus simple :
CODE JAVASCRIPT
<div id="stop"></div>
CODE JAVASCRIPT
$("#stop").click(function()
{
clearInterval(anime_slider);
});
Pour relancer le slider vous pouvez créer un nouveau bouton
CODE JAVASCRIPT
<div id="play"></div>
CODE JAVASCRIPT
$('#play').click(function() {
$("#slider").fadeOut("fast", function() { $("#slider").animate({left: "0px"}, 300, function() { $("#slider").fadeIn("fast"); });});
var count = 1;
var anime_slider = setInterval(function()
{
if(count == v2){
$("#slider").fadeOut("fast", function() { $("#slider").animate({left: "0px"}, 300, function() { $("#slider").fadeIn("fast"); });});
count = 1;
}else{
$("#slider").fadeOut("fast", function() { $("#slider").animate({left: "-=500px"}, 300, function() { $("#slider").fadeIn("fast"); });});
count = count+1;
}
}, 3000);
});
Sondage du mois
La connaissance ne vaut que si elle est partagée par tous
Utilisateurs en ligne
Administrateur - Newsers - Rédacteurs - VIP - Membres - Bots
Anniversaire du jour
Amis en ligne (0)
La bifle - Extrait
