Discussion :

[mat3000]

bonjour a tous,

Voila plus d'une semaine que je me prends la tete sur un probleme que je rencontre avec un plugin jQuery. J'essai de faire un slider assez simple en fondu. d'ailleurs, il marche tres bien s'il se trouve tout seul sur une page web. Mais des qu'il y en a plusieurs, ils fonctionnent mal...

Vous remarquerez sur le lien plus bas qu'il se trouve deux slider qui fonctionne avec le meme plugin :

- le premier ne fonctionne pas comme je le voudrais. En effet il n'est sensé n'y avoir que 3 slides, le quatrieme devrait disparaitre.

- le deuxieme slider fonctionne tres bien...

Quelqu'un aurait le courage de m'aider ?

voici le lien du slider : http://matdev.fr/public/slider/

et voici le code source :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
(function($) {
 
    $.slider = function(element, options) {
 
        var $this = this,
            $slider = $(element),
            $slide = $('.slide', $slider),
            nbslide = $slide.length,
            i_current = -1,
            i_last = null;
 
        $this.init = function() {
 
            // on cache chaque slide
            $slide.hide();
 
            $this.next();
 
            setInterval(function(){
                $this.next();
            }, 2000);
 
        };
 
        $this.next = function() {
 
            // index slide actuel
            if(i_current>=nbslide-1){i_current=0}else{i_current++};
 
            // index derniere slide
            i_last = i_current-3;
            if (i_last < 0 ) i_last = nbslide+i_last;
 
            // on lance l'anim 
            animate( i_last, i_current );
 
        };
 
        var animate = function( index_last, index_next ) {
 
            // selection des slides a animer
            $next_slide = $slide.eq(index_next);
            $last_slide = $slide.eq(index_last);
 
            // on reoganise le zindex de chaque slide
            $slide.each(function(index){
                var  numSlide = i_current-index;
                if ( numSlide < 0)  numSlide = nbslide + numSlide;
                $slide.eq( numSlide ).css( 'z-index', nbslide-index );
            });
 
            // on fait apparaitre le slide actuel
            $next_slide.fadeIn(1000, function(){
                // une fois l'anim fini, on fait disparaitre le dernier slide
                $last_slide.fadeOut(1000);
            });
 
        };
 
        $this.init();
 
    };
 
    $.fn.slider = function(options) {
 
        return this.each(function() {
            if (undefined == $(this).data('slider')) {
                var plugin = new $.slider(this, options);
                $(this).data('slider', plugin);
            }
        });
    };
 
})(jQuery);

merci de votre aide !!!!!!!!!!!

[Kaamo]

- le premier ne fonctionne pas comme je le voudrais. En effet il n'est sensé n'y avoir que 3 slides, le quatrieme devrait disparaitre.

Je vois 5 slides pour le premier dans le lien fourni

[mat3000]

bonjour Kaamo, merci pour votre réponse,

en effet il y a bien 5 slides mais seulement 3 devraient etre visibles...

[Kaamo]

Pourquoi ? Je ne vois rien d'anormal. Si seulement 3 doivent être visibles alors pourquoi ne pas enlever les 2 dernières et donc en laisser que 3 ?

[mat3000]

ok, pour etre plus clair, je vous ai fait un autre exemple :


http://matdev.fr/public/slider2/

le texte, a la fin de l'apparition d'un slide, devrait disparaitre, or cela n'est pas le cas des qu'il y a plusieur spider dans une meme page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
$next_slide.fadeIn(1000, function(){
 
    // tout ce qui se trouve ici n'est pas pris en compte...
    $last_slide.fadeOut(1000);
    $('p', $next_slide).fadeOut(1000)
 
});

[Kaamo]

$('p', this).fadeOut(1000); ?? Pour le problème de base, il y a certainement avoir un problème de compteur. Des petits console.log pour voir ce qui se passe dans ces variables.

[mat3000]

J'ai trouvé la solution, je te remerci de ton aide.

il fallait mettre dans des variables ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var $prev_slide = self.slide.eq(index_last);
var $next_slide = self.slide.eq(index_next);