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 : 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');
				};
			});
		});
 
	});
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
 
<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.