Riya Jain Riya Jain -4 years ago 80
CSS Question

Bootstrap carousel not sliding even after placing scripts properly

I have read most of the answers related to this but still couldn't get my carousel to work. It just wouldn't slide. Added the jquery script before bootstrap but still no results. Here is the code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
<div id="myCarousel1" class="carousel slide" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel1" data-slide-to="1"></li>
<li data-target="#myCarousel1" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" style="width:100%; max-height: 500px;">
<div class="item active">
<img src="https://static.pexels.com/photos/3247/nature-forest-industry-rails.jpg" style="width:100%;" />
</div>

<div class="item">
<img src="https://static.pexels.com/photos/3247/nature-forest-industry-rails.jpg" style="width:100%;" />
</div>

<div class="item">
<img src="https://static.pexels.com/photos/3247/nature-forest-industry-rails.jpg" style="width:100%;" />
</div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel1" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Answer Source

Add this too your code

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download