Lier 2 paginations( puces numérotées et prev/next)

**amdawb** · 14/05/2014, 23h42

Bonjour,
Jai un slider sur lequel j'essaie de mettre une pagination.
En suivant les tutos sur le web (car je suis un débutant), j'ai trouvé 2 systèmes de pagination: l'un avec des puces numérotées de chaque slide, et l'autre pagination en prev/next.
Je les ai combiné pour avoir une pagination style: 1 2 3 4 5 6 7 << >>, mais ne réussie pas à synchroniser les 2 modes car ils restent indépendants l'un de l'autre. Je m'explique : si je suis sur le slide1 et que je clique sur next, j'affiche bien le slide 2 mais la puce numérotée portant le numéro 2 (du slide2) n'est pas mise en valeur avec la classe .active .
Quelqu'un pourrait-il m'indiquer comment faire au niveau du js ?
Merci.

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
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<title>mix paginations </title>
	<link href="carrousel.css" rel="stylesheet" type="text/css"  />
	<script src="jquery-1.10.1.min.js" type="text/javascript"></script>
	<script src="script.js" type="text/javascript"></script>
</head>
<body>
	<div id="carrousel">
		<div id="slide1" class="slide"><img src="img/slide1.png"></div>
		<div id="slide2" class="slide"><img src="img/slide2.png"></div>
		<div id="slide3" class="slide"><img src="img/slide3.png"></div>
		<div id="slide4" class="slide"><img src="img/slide4.png"></div>
		<div id="slide5" class="slide"><img src="img/slide5.png"></div>
		<div id="slide6" class="slide"><img src="img/slide6.png"></div>
		<div id="slide7" class="slide"><img src="img/slide7.png"></div>
	</div>
</body>
</html>

Code css :

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
#carrousel{
	border: 5px solid #e7dbc5;
	width: 712px;
	height: 264px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
.slide{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 712px;
	height: 264px;
}
.navigation_num{
	position: absolute;
	bottom: 38px;
	right: 70px;
}
.navigation_btn{
	position: absolute;
	bottom: 38px;
	right: 5px;
}
.navigation_num span,.navigation_btn .suivant, .navigation_btn .precedent{
	background: #000;
	color: #fff;
	padding: 2px 4px;
	cursor: pointer;
}
.navigation_num span:hover,.navigation_btn .suivant:hover,.navigation_btn .precedent:hover,.navigation_num span.active{
	background: yellow;
	color: #000;
}

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
var carrousel = {
	nbSlide      : 0,
	nbCurrent    : 1,
	elemCurrent  : null,
	elem         : null,
 
	init : function(elem){
		this.nbSlide = elem.find('.slide').length;
 
		//Créer la navigation
		elem.append('<div class="navigation_num"></div>');
		for(var i = 1;i<= this.nbSlide;i++){elem.find('.navigation_num').append('<span>'+i+'</span>');}
		elem.append('<div class="navigation_btn"></div>');/* on crée la div navigation avec boutons flèches*/
		elem.find(".navigation_btn").append('<span class="precedent"><--</span><span class="suivant">--></span>');/*on crée les span flèches*/
 
		elem.find('.navigation_num span').click(function(){carrousel.gotoSlide($(this).text());})
		elem.find(".navigation_btn .suivant").click(function(){carrousel.gotoNextImage(carrousel.nbCurrent+1);});
		elem.find(".navigation_btn .precedent").click(function(){carrousel.gotoPreviousImage(carrousel.nbCurrent-1);});
 
		//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_num span:first').addClass('active');
	},
	//Fonctions de navigation
				//numéros
	gotoSlide : function(num){
		if(num == this.nbCurrent){return false;}
		this.elemCurrent.hide();
		this.elem.find('#slide'+num).show();
		this.elem.find('.navigation_num span').removeClass('active');
		this.elem.find('.navigation_num span:eq('+(num-1)+')').addClass('active');
		this.nbCurrent = num;
		this.elemCurrent = this.elem.find('#slide'+num);
	},
				//suivant
	gotoNextImage : function (num){
		if(num <= this.nbSlide) // on vérifie que l'on ne soit pas à la fin des images
		{
			this.elemCurrent.hide(); // quand on click, cache le slide en cours
			this.elem.find("#slide"+ num).show(); // on va ensuite chopper le slide en fonction de son indice
			this.nbCurrent = num; // on met à jour l'indice de l'élement en cours
			this.elemCurrent = this.elem.find("#slide"+num); // on met à jour l'elem en cours
		}
		else // sinon on retourne au slide 1
		{
			num=1;
			this.elemCurrent.hide();
			this.elem.find("#slide"+ num).show(); // on va ensuite chopper l'elem en fonction de son indice
			this.nbCurrent = num; // on met à jour l'indice de l'élement en cours
			this.elemCurrent = this.elem.find("#slide"+num); // on met à jour l'elem en cours
		}
	},
				//Precedent
	gotoPreviousImage : function (num){
		if(num<1) // si on veut aller, en dessous de 0, on retourne au dernier slide
		{
			num=this.nbSlide;
			this.elemCurrent.hide(); // quand on click, cache le slide en cours
			this.elem.find("#slide"+ num).show(); // on va ensuite chopper l'elem en fonction de son indice
			this.nbCurrent = num; // on met à jour l'indice de l'élement en cours
			this.elemCurrent = this.elem.find("#slide"+num); // on met à jour l'elem en cours
		}
		else
		{
			this.elemCurrent.hide();
			this.elem.find("#slide"+ num).show(); // on va ensuite chopper l'elem en fonction de son indice
			this.nbCurrent = num; // on met à jour l'indice de l'élement en cours
			this.elemCurrent = this.elem.find("#slide"+num); // on met à jour l'elem en cours
 
		}
 
	},
}
$(function(){
	carrousel.init($('#carrousel'));
});

**amdawb** · 15/05/2014, 15h11

Bonjour,
Je viens de trouver la solution pour synchroniser les 2 paginations.

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
var carrousel = {
	nbSlide      : 0,
	nbCurrent    : 1,
	elemCurrent  : null,
	elem         : null,
 
	init : function(elem){
		this.nbSlide = elem.find('.slide').length;
 
		//Créer la navigation
		elem.append('<div class="navigation_num"></div>');
		for(var i = 1;i<= this.nbSlide;i++){elem.find('.navigation_num').append('<span>'+i+'</span>');}
		elem.append('<div class="navigation_btn"></div>');/* on crée la div navigation avec boutons flèches*/
		elem.find(".navigation_btn").append('<span class="precedent"><--</span><span class="suivant">--></span>');/*on crée les span flèches*/
 
		elem.find('.navigation_num span').click(function(){carrousel.gotoSlide($(this).text());})
		elem.find(".navigation_btn .suivant").click(function(){carrousel.gotoNextImage(carrousel.nbCurrent+1);});
		elem.find(".navigation_btn .precedent").click(function(){carrousel.gotoPreviousImage(carrousel.nbCurrent-1);});
 
		//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_num span:first').addClass('active');
	},
	//Fonctions de navigation
				//numéros
	gotoSlide : function(num){
		if(num == this.nbCurrent){return false;}
		this.elemCurrent.hide();
		this.elem.find('#slide'+num).show();
		this.elem.find('.navigation_num span').removeClass('active');                    /////////////////////////////
		this.elem.find('.navigation_num span:eq('+(num-1)+')').addClass('active');       /////////////////////////////
		this.nbCurrent = num;
		this.elemCurrent = this.elem.find('#slide'+num);
	},
				//suivant
	gotoNextImage : function (num){
		if(num <= this.nbSlide) // on vérifie que l'on ne soit pas à la fin des images
		{
			this.elemCurrent.hide(); // quand on click, cache le slide en cours
			this.elem.find("#slide"+ num).show(); // on va ensuite chopper le slide en fonction de son indice
			this.elem.find('.navigation_num span').removeClass('active');                  /*++++++++++++++*/
			this.elem.find('.navigation_num span:eq('+(num-1)+')').addClass('active');     /*++++++++++++++*/
			this.nbCurrent = num; // on met à jour l'indice de l'élement en cours
			this.elemCurrent = this.elem.find("#slide"+num); // on met à jour l'elem en cours
		}
		else // sinon on retourne au slide 1
		{
			num=1;
			this.elemCurrent.hide();
			this.elem.find("#slide"+ num).show(); // on va ensuite chopper l'elem en fonction de son indice
			this.elem.find('.navigation_num span').removeClass('active');                      /*++++++++++++++*/
			this.elem.find('.navigation_num span:eq('+(num-1)+')').addClass('active');         /*++++++++++++++*/
 
 
			this.nbCurrent = num; // on met à jour l'indice de l'élement en cours
			this.elemCurrent = this.elem.find("#slide"+num); // on met à jour l'elem en cours
		}
	},
				//Precedent
	gotoPreviousImage : function (num){
		if(num<1) // si on veut aller, en dessous de 0, on retourne au dernier slide
		{
			num=this.nbSlide;
			this.elemCurrent.hide(); // quand on click, cache le slide en cours
			this.elem.find("#slide"+ num).show(); // on va ensuite chopper l'elem en fonction de son indice
			this.elem.find('.navigation_num span').removeClass('active');                   /*++++++++++++++*/
			this.elem.find('.navigation_num span:eq('+(num-1)+')').addClass('active');      /*++++++++++++++*/
			this.nbCurrent = num; // on met à jour l'indice de l'élement en cours
			this.elemCurrent = this.elem.find("#slide"+num); // on met à jour l'elem en cours
		}
		else
		{
			this.elemCurrent.hide();
			this.elem.find("#slide"+ num).show(); // on va ensuite chopper l'elem en fonction de son indice
			this.elem.find('.navigation_num span').removeClass('active');                  /*++++++++++++++*/
			this.elem.find('.navigation_num span:eq('+(num-1)+')').addClass('active');     /*++++++++++++++*/
 
			this.nbCurrent = num; // on met à jour l'indice de l'élement en cours
			this.elemCurrent = this.elem.find("#slide"+num); // on met à jour l'elem en cours
 
		}
 
	},
}
$(function(){
	carrousel.init($('#carrousel'));
});

Lier 2 paginations( puces numérotées et prev/next)

JavaScript

Discussions similaires

Partager

Partager