0

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>
Riya Jain
  • 57
  • 1
  • 1
  • 4

1 Answers1

0

Add this too your code

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
imskm
  • 780
  • 1
  • 14
  • 27