mCustomScrollbar plugin having confusing trouble

Question

I use cycle plugin for my banner with caption and the caption has a scrollbar as in the image below. I use mCustomScrollbar to style the scrollbar. The scrollbar works fine in the first caption, but when I apply it in second caption the scrollbar does not appear. What is the reason that this happens, is it related to cycle or what?

The image below shows the problem:

The 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

From what I've experienced with mCustomScrollbar you need to apply mCustomScrollbar(); on each element you want to add it on separately. Furthermore, if said elements change dimension dynamically you'll need to update and destroy the scroll bar each time the element changes size.