jquery.flexslider：触摸缩略图滑块在iOS上不起作用

Question

I'm using flex-slider's thumbnail controlnav for my slideshow. it works just fine on PC and Mac but on my iphone touching a thumbnail doesn't change the main slider's image. I haven't altered the jquery.flexslider.js file at all. The demo of the controlnav from the official site seems to work fine on my phone though. I don't have my own Mac so I cant debug with my phone directly :/. Has anyone else encountered this problem? Let me know if you need me to post html or any other code.

Here's what it should be doing: http://flexslider.woothemes.com/thumbnail-slider.html

Here's what I have for my slider declaration:

 $('#carousel').flexslider({
   animation: "slide",
   controlNav: false,
   animationLoop: false,
   slideshow: false,
   itemWidth: 210,
   itemMargin: 5,
   asNavFor: '#slider'
  });


  // The slider being synced must be initialized first
$('#carousel').flexslider({
   animation: "slide",
   controlNav: false,
   animationLoop: false,
   slideshow: false,
   itemWidth: 150,
   itemMargin: 0,
   asNavFor: '#slider'  
 });

If I replace it with the demo code the touch works, but it also creates a bunch of extra empty boxes

 $(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails"
});
}); 

thanks!

Will

Answer 1

I think you need to flip the items - you're calling flexslider on #carousel twice but never on #slider . One is being synced, the other is the nav.

$('#carousel').flexslider({
   asNavFor: '#slider'
  });

  // The slider being synced must be initialized first
$('#slider').flexslider({
   sync: '#carousel'  
 });