Bootstrap Carousel Issue: click click

Question

Моя карусель не работает. Проблема в том, что она не движется дальше, когда я нажимаю на индикатор. Я также попытался включить carousel.js, но все напрасно. Вот фрагмент кода:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicator--> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    </ol> 
 
    <!-- wrapper of slide--> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="../images/banner/slide1.jpg"> 
 
    </div> 
 
    <div class="carousel-caption"> 
 
     <h4>Find Your Agent Here</h4> 
 
     <a class="btn btn-info">Find Agent</a> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="../images/banner/slide2.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="../images/banner/slide3.jpg"> 
 
    </div> 
 
    </div> 
 
    <!-- Carousel Controler--> 
 
    <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><!-- End of Carousel -->

Answer 1

Это должно помочь.

Вам необходимо включить JQuery и загрузчик использовать этот плагин.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicator--> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    </ol> 
 
    <!-- wrapper of slide--> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg"> 
 
    </div> 
 
    <div class="carousel-caption"> 
 
     <h4>Find Your Agent Here</h4> 
 
     <a class="btn btn-info">Find Agent</a> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://im.rediff.com/news/2016/mar/01smith1.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"> 
 
    </div> 
 
    </div> 
 
    <!-- Carousel Controler--> 
 
    <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> 
 
<!-- End of Carousel -->