Discussion :

[MN_jacques]

Bonjour à tous;

je suis un vrai débutant en Javascript je travail actuellement sur un petit projet au quel j'ai un petit souci dans mes deux fonction javascript next et prev pour le défilement manuel des images dans mon Slider voici mes codes sources:

Partie HTML:

Code html :

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
<section id="slider" class="container">
 
 
    <ul class="slider-wrapper">
 
        <!-- control arrows -->
 
        <div class="prev">
            <img class="prev" src="img/arrow/ARROW_BACK.png" alt="Previous"/>
        </div>
 
        <div class="next">
            <img class="next" src="img/arrow/ARROW_NEXT.png" alt="Next"/>
        </div>
        <!-- fin control arrows -->
 
         <!-- Partie load images -->
 
                    <?php foreach($trav as $tr => $work ):?>
                             <ul>
                                 <li class="current-slide">
                                    <a href="<?= WEBROOT;?>news/<?= $work['adress']; ?>">    
                                         <img class="imgmn" src="<?= WEBROOT;?>img/works/<?= resizedName($work['name'], 650, 550) ;?>" >
                                           <div class="caption">
                                              <span class="title">
                                                 <?= $work['name']; ?>                                               
                                              </span>
                                          </div>
 
                                    </a>
                                </li>
                            </ul>
 
                    <?php endforeach?>
 
            <!-- fin Partie load images -->  
 
    </ul>
    <!-- -->
    <div class="slider-shadow"></div>
 
    <!-- Controles de Navigation-->
    <ul id="control-buttons" class="control-buttons"></ul>
 
</section>

Et voici la partie de mes codes source Javascript:

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
 
$(function() {
    /** -----------------------------------------
     * Module du slider
     -------------------------------------------*/
     var SliderModule = (function() {
        var pb = {};
        pb.el = $('#slider');
        pb.items = {
            panels: pb.el.find('.slider-wrapper > li'),
        }
 
        // Intervalle du slider
        var SliderInterval,
            currentSlider = 0,
            nextSlider = 1,
            lengthSlider = pb.items.panels.length;
 
        // Constructeur du Slider
        pb.init = function(settings) {
            this.settings = settings || {duration: 8000};
            var items = this.items,
                lengthPanels = items.panels.length,
                output = '';
 
            // Insérer nos boutons
            for(var i = 0; i < lengthPanels; i++) {
                if(i == 0) {
                    output += '<li class="active"></li>';
                } else {
                    output += '<li></li>';
                }
            }
 
            //bouton controle precedent
             $('.prev').on('click', 'img', function(e) {
                  currentSlider = lengthSlider - 1;
                });
 
            //bouton controle suivant
             $('.next').on('click', 'img', function(e) {
                  currentSlider = lengthSlider + 1;
                });
 
 
            $('#control-buttons').html(output);
 
            // Activer notre Slider
            activateSlider();
            //Événements des contrôles
            $('#control-buttons').on('click', 'li', function(e) {
                var $this = $(this);
                if(!(currentSlider === $this.index())) {
                    changePanel($this.index());
                }
            });
 
        }
 
        // Fonction pour activer le slider
        var activateSlider = function() {
            SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
        }
 
        // Fonction pour l’animation
        pb.startSlider = function() {
            var items = pb.items,
                controls = $('#control-buttons li');
            //Vérifier si la dernière lame pour réinitialiser le compteur
            if(nextSlider >= lengthSlider) {
                nextSlider = 0;
                currentSlider = lengthSlider-1;
            }
 
            controls.removeClass('active').eq(nextSlider).addClass('active');
            items.panels.eq(currentSlider).fadeOut('slow');
            items.panels.eq(nextSlider).fadeIn('slow');
 
            //Nous mettons à jour les données du slider
            currentSlider = nextSlider;
            nextSlider += 1;
        }
 
        //Fonction pour changer du panneau avec les contrôles
        var changePanel = function(id) {
            clearInterval(SliderInterval);
            var items = pb.items,
                controls = $('#control-buttons li');
            //Vérifier si l’ID est disponible entre les panneaux
            if(id >= lengthSlider) {
                id = 0;
            } else if(id < 0) {
                id = lengthSlider-1;
            }
 
            controls.removeClass('active').eq(id).addClass('active');
            items.panels.eq(currentSlider).fadeOut('slow');
            items.panels.eq(id).fadeIn('slow');
 
            //Retour à mettre à jour les données du slider
            currentSlider = id;
            nextSlider = id+1;
            // Ré-activer notre slider
            activateSlider();
        }
 
        return pb;
     }());
 
     SliderModule.init({duration: 4000});
 
});

Au faite tous marche bien pour l'instant les images défilent automatiquement sans problème mais le problème en soit se situe au niveau de mes deux fonctions next et prev en cliquant sur les deux flèches pour le défilement manuel rien ne marche.

Quelqu'un peut bien voir ou je me suis tronqué?

Merci d'avance.

[MN_jacques]

Au faite mon problème se situe sur ces deux fonctions aidez moi SVP:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
        //bouton controle precedent
             $('.prev').on('click', 'img', function(e) {
                  currentSlider = lengthSlider - 1;
                });
 
            //bouton controle suivant
             $('.next').on('click', 'img', function(e) {
                  currentSlider = lengthSlider + 1;
                });