[Résolu] Intégrer plusieurs Slideshow sur une page web ?

Bonjour à tous,

je suis intégrateur et m'efforce de devenir bon en développement JS (et jQuery) mais ne suis encore que débutant dans ce domaine...

Via un tutoriel de Graphikart concernant la création d'un carrousel en Javascript à l'aide de jQuery, j'ai développé et ai légèrement modifié ce dernier qui fonctionne très bien !

Cependant, j'aimerais l'intégrer plusieurs fois dans une même page HTML et cela dépasse malheureusement mes compétences actuelles..

Voici ci-joint le code JS, est-ce qu'une âme charitable saurait résoudre mon problème ?

Merci d'avance.

var carrousel = {
 
    nbSlide : 0,
    nbCurrent : 1,
    elemCurrent : null,
    elem : null,
    timer : null,
 
    init : function(elem){
        this.nbSlide = elem.find('.slide').length;
         
        // Création de la pagination
        elem.append('<ul class="navigation"></ul>');
        for(var i = 1; i <= this.nbSlide; i++){
            elem.find('.navigation').append('<li><a href="#">'+ i +'</a></li>');
        }
        elem.find('.navigation li:first').addClass('active');
 
        // Appel de la fonction 'gotoSlide' lors d'un clique
        elem.find('.navigation li a').click(function(e){
            carrousel.gotoSlide($(this).text());
            e.preventDefault();
        });
         
         
        // Création des boutons 'next' et 'prev'
        var prev = '<', next = '>';
        elem.append('<div class="controls"></div>');
        elem.find('.controls').append('<a href="#" class="prev">'+ prev +'</a>');
        elem.find('.controls').append('<a href="#" class="next">'+ next +'</a>');
        elem.find('.prev').click(function(e){
            carrousel.prev();
            e.preventDefault();
        });
        elem.find('.next').click(function(e){
            carrousel.next();
            e.preventDefault();
        });
         
        // Affichage des contrôles par mouseOver et masquage en mouseOut
        elem.find('.controls').hide();
        elem.mouseover(function(){
            elem.find('.controls').show();
        });
        elem.mouseout(function(){
            elem.find('.controls').hide();
        });
         
         
        // Initialisation
        this.elem = elem;
        elem.find('.slide').hide();
        elem.find('.slide:first').show();
        this.elemCurrent = elem.find('.slide:first');
         
        // On crée un timer
        carrousel.play();
        // Stop du défilement par mouseOver et redémarre par mouseOut
        elem.mouseover(carrousel.stop);
        elem.mouseout(carrousel.play);
    },
     
    gotoSlide : function(num){
        // Si on clique sur le lien actif, rien ne se passe
        if(num == this.nbCurrent){
            return false;
        }
         
         
        /* Animation en fadeIn/fadeOut
        -------------------------------------*/
        this.elemCurrent.fadeOut();
        this.elemCurrent = this.elem.find('.slide:eq('+(num-1)+')');
        this.elemCurrent.fadeIn();
         
        // On met à jour 'nbCurrent' pour le prochain clique
        this.nbCurrent = num;
         
        // Ajout de la classe 'active' sur le lien
        this.elem.find('.navigation li').removeClass('active');
        this.elem.find('.navigation li:eq('+(num-1)+')').addClass('active');
    },
     
    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);
    },
     
    play : function(){
        window.clearInterval(carrousel.timer);
        carrousel.timer = window.setInterval('carrousel.next()', 4500);
    },
     
    stop : function(){
        window.clearInterval(carrousel.timer);
    },
     
}
 
$(document).ready(function(){
    carrousel.init($('#carrousel'));
});

Modifié par El_Psy_Congroo (16 Jun 2014 - 14:25)

Je précise évidemment que ce code :

$(document).ready(function(){
	carrousel.init($('#carrousel1'));
        carrousel.init($('#carrousel2'));
});

ne fonctionne pas car dans ce cas, seul le dernier carrousel fonctionnera...

Des idées ?

Bonjour,

Une idée pourrait être de créer plusieurs instances de l'objet carrousel.

Sans trop modifier le code, on peut par exemple :
1) remplacer tous les carrousel dans le code de l'objet carrousel par carrousel[k]
2) remplacer var carrousel ={...}; par function carrouselBuilder(k) { return {...};}
3) Lancer les carrousels via le code ci-dessous :

$(document).ready(function(){
    carrousel=[];
    carrousel[1]=carrouselBuilder(1);
    carrousel[2]=carrouselBuilder(2);
    carrousel[1].init($('#carrousel'));
    carrousel[2].init($('#carrouse2'));
});

EDIT : pour la méthode play, il faut un traitement particulier car on a un setInterval. Le code de cette méthode devient :

play : function(){
        window.clearInterval(carrousel[k].timer);
        carrousel[k].timer = window.setInterval('carrousel['+k+'].next()', 4500);
    },

Amicalement,
Modifié par parsimonhi (15 Jun 2014 - 15:44)

Bonjour parsimonhi,

que dire à propos de ta réponse à part :
çà fonctionne nickel, merci infiniment !

Ta solution permet de résoudre mon problème avec un minimum de changements à mon code, que demander de plus ?

Encore merci et bien à vous,


El_Psy_Congroo