Bootstrap Karussell Problem: Indikator klicken

Question

Mein Karussell funktioniert nicht. Das Problem ist, dass es nicht weitergeht, wenn ich auf den Indikator klicke. Ich habe auch versucht, carousel.js aber alles vergebens einzuschließen. Hier ist Snippet:

<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

Diese helfen sollte.

Sie benötigen jquery und Bootstrap umfasst, das Plugin zu verwenden.

<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 -->