jcarousel ne scroll pas au bon "id"

**Séverine.r** · 04/12/2014, 12h09

Bonjour,

J ai fait un carousel avec auto scrolling, avec une fonction pour aller directement sur une slide. Tout fonctionne normalement, mais environ 40sec après avoir sélectionné une vignette(ou quand on reste longtemps sur la page), en sélectionnant une autre vignette cela fait apparaitre la mauvaise slide.

Supprimer l'autoscrolling de base de jcarousel semblait avoir résolu le problème, mais le refaire avec setInterval le fait réapparaitre.

Code html

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
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
<div class="section page7" id="section7">
 			<div class="page_container">
                <div class="page_container_wrapper margp2">
        	 <div class="wrapper">
        	 <h1 style="margin-top:50px">Actualit&eacute;s</h1>
            <div class="connected-carousels">
 
                <div class="stage">
                    <div class="carousel carousel-stage" style="margin-top: 30px" id="test">
 
                       <ul> 
                     		<li><img src="images/DRAC_Ile_de_France.png" width="620" height="334"  
                     		alt="" id="0"></li>
                      		<li><img src="images/BPI_France_AIMA.png" width="620" height="334"  alt="" id="1"></li>
                       		<li><img src="images/BPI_France_FCPI.png" width="620" height="334"  alt="" id="2"></li> 
                       		<li><img src="images/Scientipôle_initiative.png" width="620" height="334" alt="" id="3"></li>
                       		<li><img src="images/scientipôle_croissance.png" width="620" height="334"  alt="" id="4"></li>
                       		<li><img src="images/Mercure_HEC_Booster.png" width="620" height="334" alt="" id="5"></li>
                       		<li><img src="images/Direction_générale_des_Finances_statut_JEI.png" width="620" height="334" alt="" id="6"></li>
                            <li><img src="images/Paris_Région_Entreprises.png" width="620" height="334" alt="" id="7"></li>
                           	<li><img src="images/Ile_de France_AIMA.png" width="620" height="334" alt="" id="8"></li> 
                        </ul>
                    </div>
                    <a href="#" class="prev prev-stage"><span><img src="images/left.png" style= "margin-left: -294px;margin-top: -30px;"/></span></a>
                    <a href="#" class="next next-stage"><span><img src="images/right.png" style= "padding-left:124px;margin-top: -30px;" /></span></a>
                </div>
                <div class="navigation" id="navigation">
                    <div class="carousel carousel-navigation" id="navcar">
                        <ul>
                        	<li><img src="images/vignette _DRAC_Ile_de_France.png" width="97" height="49"  alt="" name="nav_item" id="0"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">DRAC Ile</br> de France</span></li>	
                        	<li><img src="images/vignette_BPI_France_AIMA.png" width="97" height="49"  alt="" name="nav_item" id="1"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">BPI France </br> AIMA</span></li>	
                        	<li><img src="images/vignette_BPI_France_FCPI.png" width="97" height="49"  alt="" name="nav_item" id="2"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">BPI France </br>FCPI</span></li> 
                        	<li><img src="images/vignette_Scientipôle_initiative.png" width="97" height="49"  alt="" name="nav_item" id="3"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">Scientip&ocirc;le</br> initiative</span></li>		
                            <li><img src="images/vignette_scientipôle_croissance.png" width="97" height="49"  alt="" name="nav_item" id="4"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">scientip&ocirc;̂le</br> croissance</span></li>
                            <li><img src="images/vignette_Mercure_HEC_Booster.png" width="97" height="49"  alt="" name="nav_item" id="5"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">Mercure HEC </br>Booster</span></li>
                            <li><img src="images/vignette_Direction_générale_des_Finances_statut_JEI.png" width="97" height="49" alt="" name="nav_item" id="6"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">Direction g&eacute;n&eacute;rale </br>des Finances</span></li>
                            <li><img src="images/vignette_Paris_Région_Entreprises.png" width="97" height="49" alt="" name="nav_item" id="7"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">Paris R&eacute;́gion</br> Entreprises</span></li><!-- 115  -->
                            <li><img src="images/vignette_Ile_de_France_AIMA.png" width="97" height="49" alt="" name="nav_item" id="8"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">Ile de</br> France</span></li>
 
 
                      </ul>
 
						<a href="#" class="prev prev-navigation"><span><img src="images/left.png" style="padding-top: 27px; margin-left: -57px "width='auto' /></span> </a>
                   		<a href="#" class="next next-navigation"><span><img src="images/right.png" style="padding-left: 21px; padding-top: 30px;" width='auto'/></span> </a>
                    </div>
 
                </div>
            </div>
            <div class="bottomwrapper gopage" data-id="7">
                    <span>Nos Partenaires</span>
                </div>
 
        </div>
        </div>
         </div>
        </div>

Code JS

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
(function($) {
 
    var connector = function(itemNavigation, carouselStage) {
        return carouselStage.jcarousel('items').eq(itemNavigation.index());
    };
 
 
    $(function() {
		//Initialisation du caroussel
 
        var carouselStage      = $('.carousel-stage').jcarousel({
			wrap: 'circular', // Permet de boucler le cycle de l'animation
		})/*  .jcarouselAutoscroll({
            interval: 10000,// Temporisation d��filement
            target: '+=1',//Nombre de slide �� d��filer
            autostart: true
        });*/
	 //Initialisation du caroussel  Vignette
        var carouselNavigation = $('.carousel-navigation').jcarousel({
			wrap: 'circular'
		});
 
        var autoscroll = setInterval(function () {
        	$(carouselStage).jcarousel('scroll', "+=1", false);
        }, 10000);
        // Initialise le controle pr��c��dent slide
        $('.prev-stage')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
 
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
 
            })
            .jcarouselControl({
                target: '-=1'
            });
       // Initialise le controle Suivant slide
        $('.next-stage')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });
 
        // Initialise le controle Precedent vignette
        $('.prev-navigation')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });
		//Initialise le controle Suivant vignette
        $('.next-navigation')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });
 
			//Affiche des controles  vignette si souris les survols (hover)
			$("#navcar>*,.next-navigation>*,.prev-navigation>*,.navigation").hover(function(){
			   $('.next-navigation').show();
			   $('.prev-navigation').show();    
 
			});	
			//Affiche des controles  vignette si souris ne survol plus (mouseleave)
			$(".navigation").mouseleave(function()
		    {
				$('.next-navigation').hide();
				$('.prev-navigation').hide();
 
		    });		
			//stop auto scrool si un clique sur vignette
			$("img[name=nav_item]").click(function()
			{
			   $(carouselStage).jcarousel('scroll', $(this).attr("id"), false);
			   console.log($(this).attr("id"));
			   clearInterval(autoscroll);
			   setTimeout(function () {
				   autoscroll = setInterval(function () {
			        	$(carouselStage).jcarousel('scroll', "+=1", false);
			        }, 10000);   
			   }, 30000);
			   /*$('.carousel-stage').jcarouselAutoscroll('stop');//Arret de autoscroll
				setTimeout(function(){
					$('.carousel-stage').jcarouselAutoscroll('start');//Relance de l'autoscroll au bout de X ms
				}, 30000);*/
			});
 
			 $('.next-navigation').hide();
			 $('.prev-navigation').hide();
    });
})(jQuery);