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 -
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);
})
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:
- Créer une boucle infini pour un slider
- Créer un compte google - Guide
- Créer un lien pour partager des photos - Guide
- Comment créer un groupe whatsapp - Guide
- Créer un compte gmail - Guide
- Créer un compte instagram sur google - Guide
1 réponse
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
}
);
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
}
);