vignettes sur carrousel jquery
Bonjour à tous.
Je vous expose ma problématique :?.
niveau en jquery : moyen, voir débutant
J' ai repris la construction d' un carrousel pour site mobile, les images défilent correctement lorsque l'on clique, à la dernière image on revient à la première image. jusqu' ici, ça va.
les tracas surviennent avec la génération auto de vignettes correspondant au nombre d' images trouvées, j'ai le bon nombre de vignettes, la couleur des vignettes changent à chaque fois que l'on change d' image.
Sous le carrousel on trouve des liens et lorsque l'on clique dessus apparaît en desous des cathégories, mais cela ajoute aussi des vignettes à mon carrousel et c' est pire encore lorsque l`on clique sur l' onglet "accueil" .
pour ceux qui peuvent m'aider voici mon code jquery:
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
|
$('div:jqmData(role="page")').live('pagebeforeshow',function(){
$(".feature").each(function (){
// Set default index
var featureIndex = 0;
// Get width of the first image
var imgW = $('.feature ul li:first-child a img').width();
// Number of list items in caroussel
var imgNum = $('.feature').find('ul.fItems li').length;
// Calculate position of each list items
var animValue = featureIndex * imgW;
$('.fWrap').css({width : (imgNum*imgW), left : '0'});
//set a mark for each picture
for (var i=0; i < imgNum; i++) {
if (i == imgNum) {
return false;
};
$('ul.fMarks').append('<li></li>')
//first mark has class = active by default
.children(':first').addClass('active');
};
//Function when user click on next button
$('.feature a.fSwitcherNext').click(function(){
featureIndex ++;
var animValue = featureIndex * imgW;
if (featureIndex == imgNum ) {
//if it's the last picture, get back to the first one
$(this).parent().find('.fWrap').animate({left: '0px'},200);
featureIndex = 0 ;
//remove class "active" form the last marks
$('ul.fMarks li:last').removeClass('active')
// Set class "active" to the first mark
$('ul.fMarks li:first').addClass('active');
}else{
//move to the next picture
$(this).parent().find('.fWrap').animate({left: '-' + animValue + 'px'},200);
//set class "active" to the next mark
$('li.active ').removeClass('active').next().addClass('active');
};
});
});
}); |
et voici le 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
|
<section class="feature">
<div class="fWrap">
<ul class="fItems">
<li><a href="detail.html" title="" rel=""><img src="static/img/promo01.jpg" alt=""></a></li>
<li><a href="detail.html" title="" rel=""><img src="static/img/promo02.jpg" alt=""></a></li>
<li><a href="detail.html" title="" rel=""><img src="static/img/promo01.jpg" alt=""></a></li>
<li><a href="detail.html" title="" rel=""><img src="static/img/promo02.jpg" alt=""></a></li>
<li><a href="detail.html" title="" rel=""><img src="static/img/promo01.jpg" alt=""></a></li>
</ul>
<div class="clearer"><!-- --></div>
</div>
<a href="#" title="" class="fSwitcherNext">Promotion suivante</a>
<ul class="fMarks">
</ul>
<div class="featureExtra01"><!-- --></div>
<div class="featureExtra02"><!-- --></div>
</section> |
Merci d' avance à tous ceux qui pourront m' aider.
