2013-06-05 171 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