Hi All,

I have visualforce component implementing Carousel . Images are not sliding. Here is the component page code:

<aura:component implements="force:appHostable" >
<ltng:require styles="/resource/bootStrapCss"/>    
<ltng:require scripts="/resource/jQuery,/resource/bootStrapJS" afterScriptsLoaded="{!c.doinit}" />
    
  <div class="container">
  <h2>Activate Carousel with JavaScript</h2>
  <div id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="item1 active"></li>
      <li data-target="#myCarousel" data-slide-to="1" class="item2"></li>
      <li data-target="#myCarousel" data-slide-to="2" class="item3"></li>
      <li data-target="#myCarousel" data-slide-to="3" class="item4"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
          <img src="http://mu.ac.in/portal/wp-content/uploads/2012/01/univeristy-of-mumbai.jpg" alt="Chania"  height="345"></img>
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>
    <div class="item">
        <img src="http://studentcompetitions-general.s3.amazonaws.com/cyp-2014/img/lundsuniversitet_-_b.jpg" alt="Chania"  height="345"></img>
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>
    
      <div class="item">
        <img src="http://kinesiology.rice.edu/uploadedImages/sc_rice.jpg" alt="Flower" width="460" height="345"></img>
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

      <div class="item">
        <img src="http://orientaluniversity.in/wp-content/uploads/2016/02/banner-1.jpg" alt="Flower" width="460" height="345"></img>
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
 
</aura:component>

Here is the controller code:
({
    doinit : function(component, event, helper) {
        $(document).ready(function(){
    // Activate Carousel
    $("#myCarousel").carousel();
    
    // Enable Carousel Indicators
    $(".item1").click(function(){
        $("#myCarousel").carousel(0);
    });
    $(".item2").click(function(){
        $("#myCarousel").carousel(1);
    });
    $(".item3").click(function(){
        $("#myCarousel").carousel(2);
    });
    $(".item4").click(function(){
        $("#myCarousel").carousel(3);
    });
    
    // Enable Carousel Controls
    $(".left").click(function(){
        $("#myCarousel").carousel("prev");
    });
    $(".right").click(function(){
       // alert('next start');
        $("#myCarousel").carousel("next");
        // alert('next end');
    });
});
    }
})

Please suggest any solution.