Créer une boucle infini pour un slider

julienzerobot Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   -  
julienzerobot Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
je viens d'entré dans le monde du scripte donc un débutant et je rencontre un problème avec un slider. voilà j'ais trouvé un slider<a href="http://blog.guilhemmarty.com/2010/07/tutoriel-creer-un-slider-javascript-avec-jquery/comment-page-1/#comment-576">ici</a> très intéressant le problème est que je n'arrive pas à créer une boucle qui défile à l'infini

--------------le code html du slider--------------
<li class="slide">
<img src="visuel1L.jpg" title="Rally Car" alt="Rally Car"/>
<div class="slide-content">
<h2>Let's start</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis turpis, porttitor eget commodo eu.</p>
<a class="read-more" href="#">Lire l'article</a>
Photo : <a href="https://www.flickr.com/photos/papazimouris/" target="_blank">flickr</a>
</div>
</li>

------------mon présent code java---------
var timer = new Object;

function slider(){
nextSlide();
timer = window.setTimeout(slider,5000);
}

function nextSlide(){
var $Slides = $("#slides");
$("#nextSlide").unbind("click",nextSlide);
$Slides.animate(
{marginLeft:"-=160px"},
1000,
function(){
$Slides.data("currentSlide",$Slides.data("currentSlide")+1);
if($Slides.data("currentSlide") > $Slides.data("nbSlides")){
$Slides
.data("currentSlide",1)
.css({marginLeft:"-100px"});
}
window.clearTimeout(timer);
timer = window.setTimeout(slider,5000);
$("#nextSlide").bind("click",nextSlide);
}
);
}

function prevSlide(){
var $Slides = $("#slides");
$("#prevSlide").unbind("click",prevSlide);
$Slides.animate(
{marginLeft:"+=160px"},
1000,
function(){
$Slides.data("currentSlide",$Slides.data("currentSlide")-1);
if($Slides.data("currentSlide") == 0){
$Slides
.data("currentSlide",$Slides.data("nbSlides"))
.css({marginLeft:-(500*$Slides.data("currentSlide"))});
}
window.clearTimeout(timer);
timer = window.setTimeout(slider,4000);
$("#prevSlide").bind("click",prevSlide);
}
);
}


$(function(){
var $Slides = $("#slides");
var _step = 160;
$Slides
.data("currentSlide",1)
.data("nbSlides",$Slides.find("li").size());
$Slides
.find("li:last")
.clone()
.prependTo("#slides");

$Slides
.find("li:first")
.next()
.clone()
.appendTo("#slides");

$Slides
.find("li:first")
.addClass("clone")
.end()
.find("li:last")
.addClass("clone")
.end()
.css({marginLeft:-_step});

$Slides.width($Slides.find("li").size()*_step);

$("#nextSlide").bind("click",nextSlide);
$("#prevSlide").bind("click",prevSlide);

timer = window.setTimeout(slider,4000);

})

A voir également:

1 réponse

julienzerobot Messages postés 2 Date d'inscription   Statut Membre Dernière intervention  
 
au faite j'ai trouvé un début de réponse mais pour le code lui même je m'en sors pas car je débutes aider moi please!
au chargement de la page, positionne ton slider sur [image 1]. Ensuite dans ton appel à la fonction animate, utilise une fonction callback pour vérifier à la fin de l'animation sur quelle image tu te situe. Si tu es arrivé sur [clone de l'image 1] tu repositionne ton slider sur [image 1], sinon aucune action :

self.slider.animate(
{left:-self.largeurCumule},
1000,
function(){
//si positionné sur clone de l'image 1,
//se positionner sur l'image 1 originale
}
);
0