Discussion :

[kate59]

Bonjour,

je vous joins le lien j'ai mit des id unique mais la carousel bug :
http://jsfiddle.net/elodie66/ffer2nc4/22/

je pense que c'est l'initialisation mais je pense avoir rien oublié, si quelqu'un peut regarder ?

merci.

[kate59]

j'ai presque tout reglé la seule chose est que en cliquant sur l'image le carousel duu bas devrait bouger elle le fait pour la 2diaporama mais pas pour le 1er

http://test3.webcreation66.com/piscines.php

le code est identique donc la je ne vois pas pourquoi ca marche pour la 2eme diapo mais pas la 1er.

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<script type="text/javascript">
		 var $ = jQuery.noConflict();
 
var realSlider= $("ul#bxslider").bxSlider({
      speed:1000,
      pager:false,
      nextText:'',
      prevText:'',
      infiniteLoop:false,
      hideControlOnEnd:true,
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        changeRealThumb(realThumbSlider,newIndex);
 
      }
 
    });
 
    var realThumbSlider=$("ul#bxslider-pager").bxSlider({
      minSlides: 4,
      maxSlides: 4,
      slideWidth: 156,
      slideMargin: 12,
      moveSlides: 1,
      pager:false,
      speed:1000,
      infiniteLoop:false,
      hideControlOnEnd:true,
      nextText:'<span></span>',
      prevText:'<span></span>',
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        /*$("#sliderThumbReal ul .active").removeClass("active");
        $slideElement.addClass("active"); */
 
      }
    });
 
    linkRealSliders(realSlider,realThumbSlider);
 
    if($("#bxslider-pager li").length<5){
      $("#bxslider-pager .bx-next").hide();
    }
 
// sincronizza sliders realizzazioni
function linkRealSliders(bigS,thumbS){
 
  $("ul#bxslider-pager").on("click","a",function(event){
    event.preventDefault();
    var newIndex=$(this).parent().attr("data-slideIndex");
        bigS.goToSlide(newIndex);
  });
}
 
//slider!=$thumbSlider. slider is the realslider
function changeRealThumb(slider,newIndex){
 
  var $thumbS=$("#bxslider-pager");
  $thumbS.find('.active').removeClass("active");
  $thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active");
 
  if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex);
  else slider.goToSlide(slider.getSlideCount()-4);
 
}
 
</script>
 
 
 
	<script type="text/javascript">
		 var $ = jQuery.noConflict();
 
var realSlider= $("ul#bxslider2").bxSlider({
      speed:1000,
      pager:false,
      nextText:'',
      prevText:'',
      infiniteLoop:false,
      hideControlOnEnd:true,
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        changeRealThumb(realThumbSlider,newIndex);
 
      }
 
    });
 
    var realThumbSlider=$("ul#bxslider-pager2").bxSlider({
      minSlides: 4,
      maxSlides: 4,
      slideWidth: 156,
      slideMargin: 12,
      moveSlides: 1,
      pager:false,
      speed:1000,
      infiniteLoop:false,
      hideControlOnEnd:true,
      nextText:'<span></span>',
      prevText:'<span></span>',
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        /*$("#sliderThumbReal ul .active").removeClass("active");
        $slideElement.addClass("active"); */
 
      }
    });
 
    linkRealSliders(realSlider,realThumbSlider);
 
    if($("#bxslider-pager2 li").length<5){
      $("#bxslider-pager2 .bx-next").hide();
    }
 
// sincronizza sliders realizzazioni
function linkRealSliders(bigS,thumbS){
 
  $("ul#bxslider-pager2").on("click","a",function(event){
    event.preventDefault();
    var newIndex=$(this).parent().attr("data-slideIndex2");
        bigS.goToSlide(newIndex);
  });
}
 
//slider!=$thumbSlider. slider is the realslider
function changeRealThumb(slider,newIndex){
 
  var $thumbS=$("#bxslider-pager2");
  $thumbS.find('.active').removeClass("active");
  $thumbS.find('li[data-slideIndex2="'+newIndex+'"]').addClass("active");
 
  if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex);
  else slider.goToSlide(slider.getSlideCount()-4);
 
}
 
</script>

merci.

[Invité]

Bonjour,

ton script me parait bien compliqué...

Tu es sûre d'avoir bien compris le fonctionnement avec thumbnails ?

• Thumbnail pager - method 1

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ul class="bxslider">
...
</ul>
<div id="bx-pager">
...
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('.bxslider').bxSlider({
  pagerCustom: '#bx-pager'
});

Il N'y a PAS de code à rajouter pour relier le slider aux thumbnails !

• Thumbnail pager - method 2

J'ai l'impression que tu as MÉLANGÉ les 2 méthodes !