Créer une boucle infini pour un slider

Fermé
julienzerobot Messages postés 2 Date d'inscription mercredi 19 décembre 2012 Statut Membre Dernière intervention 19 décembre 2012 - Modifié par julienzerobot le 19/12/2012 à 21:19
julienzerobot Messages postés 2 Date d'inscription mercredi 19 décembre 2012 Statut Membre Dernière intervention 19 décembre 2012 - 19 déc. 2012 à 21:24
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 mercredi 19 décembre 2012 Statut Membre Dernière intervention 19 décembre 2012
19 déc. 2012 à 21:24
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
}
);