Slideshow

Fermé
chabinot Messages postés 317 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 9 mars 2023 - 1 avril 2017 à 15:51
Bonjour,
J'ai trouvé un exemple de slideshow qui marche très bien. Cependant, j'ai un petit problème :
J'ai une suite de numéro qui va de 1 à 9 représentant chacun une image.
Quand je clique sur le numéro 5, il affiche bien l'image 5, puis, au lieu de m'afficher l'image suivante, à savoir l'image 6, il retourne à la première image.
Voici mon code javaScript :
var carrousel = {
    
    nbSlide : 0,
    nbCurrent : 1,
    elemCurrent : null,
    elem : null,
    timer : null,
    
    init : function(elem){
        this.nbSlide = elem.find(".slide").length;
        
        // Créer la pagination
        elem.append('<div class="navigation"></div>');
        for(var i=1;i<=this.nbSlide;i++){
            elem.find(".navigation").append("<span>"+i+"</span>");
        }
        elem.find(".navigation span").click(function(){ carrousel.gotoSlide($(this).text()); })
        
        // Initialisation du carrousel
        this.elem=elem;
        elem.find(".slide").hide();
        elem.find(".slide:first").show();
        this.elemCurrent = elem.find(".slide:first");
        this.elem.find(".navigation").css("opacity",0.6);   // On rend la navigation opaque
        this.elem.find(".navigation span:first").addClass("active");
        
        // On cré le timer
        carrousel.play();
        // Stop quand on passe dessus
        elem.mouseover(carrousel.stop);
        elem.mouseout(carrousel.play);
    },
    
    gotoSlide : function(num){
        if(num==this.nbCurrent){ return false; }
        
        /* Animation en fadeIn/fadeOut 
        this.elemCurrent.fadeOut();
        this.elem.find("#slide"+num).fadeIn();
        */
        /* Animation en slide 
        var sens = 1;
        if(num<this.nbCurrent){ sens = -1;}
        var cssDeb = { "left" : sens*this.elem.width() };
        var cssFin = { "left" : -sens*this.elem.width() };
        this.elem.find("#slide"+num).show().css(cssDeb);
        this.elem.find("#slide"+num).animate({"top":0,"left":0},500);
        this.elemCurrent.animate(cssFin,500);
     
        /*
        Animation Titre + Fadein/Out sur la div visu
        */
        this.elemCurrent.find(".visu").fadeOut(1500);
        this.elem.find("#slide"+num).show();
        this.elem.find("#slide"+num+" .visu").hide().fadeIn(1500);        
        
        this.elem.find(".navigation span").removeClass("active");
        this.elem.find(".navigation span:eq("+(num-1)+")").addClass("active");
        this.nbCurrent = num;
        this.elemCurrent = this.elem.find("#slide"+num);
    },
    
    next : function(){
        var num  = this.nbCurrent+1;
        if(num  > this.nbSlide){
            num  = 1;
        }
        this.gotoSlide(num);
    },
    prev : function(){
        var num  = this.nbCurrent-1;
        if(num< 1){
            num= this.nbSlide;
        }
        this.gotoSlide(num);
    },
    stop : function(){
        window.clearInterval(carrousel.timer);
    },
    play : function(){
        window.clearInterval(carrousel.timer);
        carrousel.timer = window.setInterval("carrousel.next()",3500);
    }

}

$(function(){
    carrousel.init($("#carrousel"));
});

et voici le code html :
<article>
		<section class="presentation">
			<div class="section">
				<div id="carrousel">
					<div class="slide" id="slide1">
						<div class="visu">
							<img class="image" src="img/anse-caritan.jpg" alt="Ma photo">
						</div>
						<div class="title">
							<h3>Martinique - Fleur des Caraïbes</h3>
						</div>
					</div>
					<div class="slide" id="slide2">
						<div class="visu">
							<img class="image" src="img/banner001.jpg" alt="Ma photo">
						</div>
						<div class="title">
							<h3>Martinique - Fleur des Caraïbes</h3>
						</div>
					</div>
					<div class="slide" id="slide3">
						<div class="visu">
							<img class="image" src="img/carte-postale.jpg" alt="Ma photo">
						</div>
						<div class="title">
							<h3>Martinique - Fleur des Caraïbes</h3>
						</div>
					</div>
					<div class="slide" id="slide4">
						<div class="visu">
							<img class="image" src="img/banner002.jpg" alt="Ma photo">
						</div>
						<div class="title">   
							<h3>Martinique - Fleur des Caraïbes</h3>
						</div>
					</div>
					<div class="slide" id="slide5">
						<div class="visu">
							<img class="image" src="img/banner003.jpg" alt="Ma photo">
						</div>
						<div class="title">   
							<h3>Martinique - Fleur des Caraïbes</h3>
						</div>
					</div>
					<div class="slide" id="slide6">
						<div class="visu">
							<img class="image" src="img/banner004.jpg" alt="Ma photo">
						</div>
						<div class="title">   
							<h3>Martinique - Fleur des Caraïbes</h3>
						</div>
					</div>
					<div class="slide" id="slide7">
						<div class="visu">
							<img class="image" src="img/banner007.jpg" alt="Ma photo">
						</div>
						<div class="title">   
							<h3>Martinique - Fleur des Caraïbes</h3>
						</div>
					</div>
					<div class="slide" id="slide8">
						<div class="visu">
							<img class="image" src="img/kayak.jpg" alt="Ma photo">
						</div>
						<div class="title">   
							<h3>Martinique - Fleur des Caraïbes</h3>
						</div>
					</div>
					<div class="slide" id="slide9">
						<div class="visu">
							<img class="image" src="img/coucher-de-soleil.jpg" alt="Ma photo">
						</div>
						<div class="title">   
							<h3>Martinique - Fleur des Caraïbes</h3>
						</div>
					</div>
				</div>
			</div>
		</section>
	</article>


Merci beaucoup, si quelqu'un a une idée.


A voir également: