mCustomScrollbar plugin ayant des problèmes de confusion

Question

J'utilise le plugin de cycle pour ma bannière avec la légende et la légende a une barre de défilement comme dans l'image ci-dessous. J'utilise mCustomScrollbar pour styliser la barre de défilement. La barre de défilement fonctionne correctement dans la première légende, mais lorsque je l'applique dans la deuxième légende, la barre de défilement n'apparaît pas. Quelle est la raison pour laquelle cela arrive, est-ce lié à cycle ou quoi?

L'image ci-dessous montre le problème:

Le code (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 --> 

Answer 1

D'après ce que j'ai vécu avec mCustomScrollbar vous devez appliquer mCustomScrollbar(); sur chaque élément, vous voulez l'ajouter séparément. De plus, si les éléments changent dynamiquement de dimension, vous devrez mettre à jour et détruire la barre de défilement chaque fois que l'élément change de taille.