jQuery的FlexSlider和传送带缩略图导航

我使用jQuery FlexSlider下面是我的代码jQuery的FlexSlider和传送带缩略图导航

<link rel="stylesheet" type="text/css" href="css/gallery/shCore.css" /> 
<link rel="stylesheet" type="text/css" href="css/gallery/shThemeDefault.css" /> 
<link rel="stylesheet" type="text/css" href="css/gallery/flexslider.css" /> 

<script type="text/javascript" src="js/gallery/modernizr.js"></script> 
<script type="text/javascript" src="js/gallery/jquery.flexslider.js" ></script> 
<script type="text/javascript" src="js/gallery/shCore.js"></script> 
<script type="text/javascript" src="js/gallery/shBrushXml.js"></script> 
<script type="text/javascript" src="js/gallery/shBrushJScript.js"></script> 

<script type="text/javascript" src="js/gallery/jquery.easing.js"></script> 
<script type="text/javascript" src="js/gallery/jquery.mousewheel.js"></script>

而且ISIN身体下面

<body> 
<div id="slider" class="flexslider"> 
         <ul class="slides"> 
          <li > 
           <img src="images/gallery/1.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px" /> 
          </li> 
          <li > 
           <img src="images/gallery/2.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px"/> 
          </li> 
          <li > 
           <img src="images/gallery/3.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px" /> 
          </li> 
          <li > 
           <img src="images/gallery/4.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px" /> 
          </li> 
          <li > 
           <img src="images/gallery/5.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px" /> 
          </li> 
          <li > 
           <img src="images/gallery/6.jpg" alt="image93" data-description="Fiesta Gallery" height="299px" width="450px" /> 
          </li> 
          <li > 
           <img src="images/gallery/7.jpg" alt="image97" data-description="Fiesta Gallery" height="299px" width="450px" /> 
          </li> 
          <li > 
           <img src="images/gallery/8.jpg" alt="image108" data-description="Fiesta Gallery" height="299px" width="450px" /> 
          </li> 
</ul> 
        </div> 
        <div id="carousel" class="flexslider" style="margin-top:-50px;"> 
         <ul class="slides"> 
          <li > 
           <img src="images/gallery/thumbs/1.jpg" height="100px" /> 
          </li> 
          <li > 
           <img src="images/gallery/thumbs/2.jpg" height="100px" /> 
          </li> 
          <li > 
           <img src="images/gallery/thumbs/3.jpg" height="100px" /> 
          </li> 
          <li > 
           <img src="images/gallery/thumbs/4.jpg" height="100px" /> 
          </li>  
          <li > 
           <img src="images/gallery/thumbs/5.jpg" height="100px" /> 
          </li> 
          <li > 
           <img src="images/gallery/thumbs/6.jpg" height="100px" /> 
          </li> 
          <li > 
           <img src="images/gallery/thumbs/7.jpg" height="100px" /> 
          </li> 
          <li > 
           <img src="images/gallery/thumbs/8.jpg" height="100px" /> 
          </li> 
</ul> 
        </div> 
</body>

而下面是在头部分配置

$(function(){ 
     SyntaxHighlighter.all(); 
    }); 
    $(window).load(function() { 
     // The slider being synced must be initialized first 
     $('#carousel').flexslider({ 
     animation: "slide", 
     controlNav: false, 
     animationLoop: true, 
     directionNav: false, 
     slideshow: false,  
     slideshowSpeed: 7500, 
     animationSpeed: 400, 
     itemWidth: 150, 
     itemMargin: 5, 
     startAt: 0, 
     move : 3,    
     asNavFor: '#slider' 

     }); 

     $('#slider').flexslider({ 
     animation: "slide", 
     controlNav: false, 
     animationLoop: true, 
     slideshowSpeed: 7500, 
     animationSpeed: 400, 
     pauseOnAction: false, 
     slideshow: true, 
     startAt: 0, 
     sync: "#carousel", 
     start: function(slider) { 
     $('#carousel .slides li img').click(function(event){ 
      event.preventDefault(); 
      //slider.flexAnimate(slider.getTarget("next")); 
      var count = slider.currentSlide + 1; 
      slider.flexAnimate(count); 
     }); 
     } 
     }); 
    });

从上面的代码，我可以做自动滑动，左/右按钮导航，并在这样我thumnails点击它的作品。

但是，如果我从当前缩略图后面点击两个缩略图，它会停止自动滑动。

我该如何解决这个问题？任何帮助将大大增加。

非常感谢！

来源

2012-07-29 RedsDevils

我用下面的代码替换：它的工作原理

start: function(slider) { 
    $('#carousel .slides li img').click(function(event){ 
     $('#slider').flexslider("play"); 
    }); 
}

我可以从参考弄清楚： https://github.com/woothemes/FlexSlider/

来源

2012-07-30 14:27:53 RedsDevils

非常好，我使用“缩略图ControlNav模式”，所以我修改了你的代码，它解决了我的问题。谢谢。 – 2013-01-27 17:06:32

这里是HTML结构

   <div class="g-s-wrapper"> 

       <div class="flexslider"> 

       <ul class="slides"> 

        <li data-thumb="assets/img/gallery-photo/1.jpg"> 
        <img src="assets/img/gallery-photo/1.jpg" alt=""> 
        </li> 

        <li data-thumb="assets/img/gallery-photo/2.jpg"> 
        <img src="assets/img/gallery-photo/2.jpg" alt=""> 
        </li> 

       </ul> <!-- .slides --> 

       </div> <!-- .flexslider --> 

      </div> <!-- .gallery slider wrapper -->

当你调用flexslider功能，如下使用

if ($('.g-s-wrapper').length > 0) { 

    $(window).load(function() { 
     $('.g-s-wrapper .flexslider').flexslider({ 
      slideshowSpeed: 2000, 
      directionNav: false, 
      controlNav: true, 
      start: function(){ 
       var slide_li = $('.g-s-wrapper ul.slides li').not('.clone'); 
       var control_li = $('.g-s-wrapper .flexslider .flex-control-nav li a'); 
       console.log(control_li); 
       $.each(slide_li, function(index, el){ 
        var img_src = $('<img src="" />').attr('src', $(el).attr('data-thumb')); 
           img_src.appendTo(control_li[index]); 

       });        
      } 
     }); 
    });

来源

2015-09-02 02:30:48 porpor

jQuery的FlexSlider和传送带缩略图导航

回答

相关问题