Lier 2 paginations( puces numérotées et prev/next)
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:
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:
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:
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'));
}); |
