2013-04-10 166 views
0

我使用循環插件爲我的旗幟與標題和標題有一個滾動條,如下圖所示。我使用mCustomScrollbar來設置滾動條的樣式。滾動條在第一個標題中工作正常,但是當我將其應用於第二個標題時,滾動條未出現。發生這種情況的原因是什麼,它是與cycle還是什麼有關?mCustomScrollbar插件令人困惑

下圖顯示了這個問題:

enter image description here

的代碼(JavaScript的):

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript" src="js/jquery.cycle.all.js"></script> 
     <script type="text/javascript"> 

$(document).ready(function() { 
    $('.slider').cycle({ 
    fx: 'scrollHorz', 
    slideExpr: "img:not(.hide)", 
    slideResize: false, 
    containerResize: false, 
    speed: 500, 
    timeout: 5000, 
    after: function(curr,next,opts) { 
      var index=opts.currSlide; 
      $('#caption div.captionContent:visible').hide(); 
      $('#caption div.captionContent').eq(index).show(); 
      } 

    }); 
    }); 

</script> 
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script> 
<script> 
     (function($){ 
      $(window).load(function(){ 
       $(".cc").mCustomScrollbar({ 
        scrollButtons:{ 
         enable:true 
        } 
       }); 
      }); 
      </script> 

HTML:

<div class="banner"> 
     <div id="caption"> 
      <div class="captionContent slide5"> 
      <div class="cc"> 
       <p>Our clients receive a personalised one on one service from one of our principles to guide them from the initial brief to the final completion of their project.</p> 
      </div> 
      </div> 
      <div class="captionContent"></div> 
      <div class="captionContent"></div> 
      <div class="captionContent"></div> 

     </div> 

     <div class="slider"> 
      <img class="hide" src="images/banner1.jpg" alt="slider 1" /> 
      <img src="images/banner5.jpg" alt="slider 1" /> 
      <img src="images/banner2.jpg" alt="slider 1" /> 
      <img src="images/banner3.jpg" alt="slider 1" /> 
      <img src="images/banner5.jpg" alt="slider 1" /> 
     </div> 
    </div><!-- end banner --> 

回答

0

從我與mCustomScrollbar經歷你需要應用mCustomScrollbar();在你想分開添加的每個元素上。此外,如果所述元素動態更改維度,則每次元素更改大小時都需要更新和銷燬滾動條。