Bien je te conseil d'ajouter une seconde classe pou les récupérer plus facilement.
ensuite grâce à jquery tu peux affecter un evénement click même à de simple <span/>
Alors pour réaliser un beau carousel d'image maison tu à besoin d'une div position relative avec un overflow à hidden et une largeur égale à la largeur de tes image
#SlideContent{position:relative; width:200px; height:197px; overflow:hidden}
1 2 3 4 5
| <div id='SlideContainer'>
[...]
</div>
<span id='last'><</span>
<span id='next'>></span> |
A présent on va intégrer un élément qui glissera de droite à gauche selon le bouton sur lequel on va cliquer donc position absolute;
#slider{position:absolute; width:600px; height:197px; left:0px; top:0px;}
1 2 3
| <div id='SlideContainer'>
<div id="slider">[...]</div>
</div>[...] |
maintenant on va intégrer nos trois image pour le test
#slider img{position:relative; width:200px; height:197px; float:left;}
1 2 3 4 5 6 7
| <div id='SlideContainer'>
<div id="slider">
<img src='image1.jpg'>
<img src='image2.jpg'>
<img src='image3.jpg'>
</div>
</div>[...] |
Et maintenant la partie qui nous intéresse le JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| //Récupérer nos images en global
var imgs=$('#slider img');
//Definir notre index de déplacement global
var _index=0;
//Définir le slider de manière global
var _slider=$('#slider');
$(function(){
//Fonction pour avancer vers la droite
$('#next').click(function(){
//si l'index +1 est inférieur à au nombre d'image-1 pour éviter de montrer une image qui a pas
if(index+1<imgs.length()){
index++
//on récupère la position gauche de l'image que l'on souhaite afficher
var leftImage=$(imgs[index]).offset().left();
//on récupère la position du slider
var leftSlider=_slider.offset().left();
//La position gauche final
var l=leftSlider-leftImage;
//Puis on anime le tout
_slider.animate({left:l},1000);
}
})
}) |
Voila j'ai montré avec le bouton de droite ne te reste plus que le bouton de gauche et le tour est joué
Partager