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:
et voici le html :
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 $('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'); }; }); }); });
Merci d' avance à tous ceux qui pourront m' aider.
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 <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>
Partager