2013-06-05 94 views
1

我是新来的JS和这种滑块 我有一个问题与Flex滑块(缩略图滑块)中的样式有关。在图像的最后一张幻灯片它产生额外的空间和图像会在屏幕这就是为什么最后一张幻灯片无法正确显示的左边..Flex滑块不能正常工作上一张幻灯片

这里是脚本代码: -

$(window).load(function(){ 
    $('#flex_carousel').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    animationLoop: true, 
    slideshow: true, 
    itemWidth: 380, 
    itemMargin: 5, 
    maxItems: 3, 
    pauseOnHover: false, 
    pauseOnAction: false, 
    asNavFor: '#flex_main_slider' 
    }); 

    $('#flex_main_slider').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    animationLoop: true, 
    slideshow: true, 

    animationSpeed:1000, 
    slideshowSpeed:2000, 
    sync: "#flex_carousel", 
    start: function(slider){ 
    $('body').removeClass('loading'); 
    } 
    }); 
}); 

与此页面上的代码来显示滑块..

 <ul class="slides"> 
     <li> 
      <img src="images/frex1.jpg" /> 
       <div class="flex-thumbnal-area"> 
       <span>Producing<h4>Quality</h4></span> 
       <input type="submit" name="button" class="flex-btn" value="Explore More" /> 
       </div> 
      </li> 
      <li> 
      <img src="images/frex2.jpg" /> 
       <div class="flex-thumbnal-area"> 
       <span>Producing<h4>Quality</h4></span> 
       <input type="submit" name="button" class="flex-btn" value="Explore More" /> 
       </div> 
      </li> 

帮我... 尽快 感谢的事先提示..

回答

-1

你在这里失去了一些东西:

  • 调用$(window).load代替$(document).ready
  • 调用flexslider两次不正确选择器

标记是哪里ssary让这个滑块插件工作。此外,您正在调用flexslider函数两次并使用不正确的选择器。请参阅工作sample here