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});
}); |
