Carousel Images Are Not Rotating In Bootstrap Css

I am trying to implement carousel in bootstrap CSS but the carousel is not rotating,I am using HTML images in the carousel, Here is the code:

Solution 1:

Link to Bootply

The problem was that you had targeted myCarousel but hadn't set that anywhere. You needed to give a div the id of myCarousel and wrap it around your code.

Wrap this code around yours:

<div id="myCarousel" class="carousel slide">
  <!-- Your code -->
</div>

Solution 2:

You need to add above indicators

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

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

You can get for details at http://getbootstrap.com/javascript/#carousel

Thanks

Solution 3:

<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Carousel indicators -->

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

    <!-- Carousel items -->

    <div class="carousel-inner">

        <div class="active item">

            <h2>Slide 1</h2>

            <div class="carousel-caption">

              <h3>First slide label</h3>

              <p>Lorem ipsum dolor sit amet consectetur…</p>

            </div>

        </div>

        <div class="item">

            <h2>Slide 2</h2>

            <div class="carousel-caption">

              <h3>Second slide label</h3>

              <p>Aliquam sit amet gravida nibh, facilisis gravida…</p>

            </div>

        </div>

        <div class="item">

            <h2>Slide 3</h2>

            <div class="carousel-caption">

              <h3>Third slide label</h3>

              <p>Praesent commodo cursus magna vel…</p>

            </div>

        </div>

    </div>

    <!-- Carousel nav -->

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left"></span>

    </a>

    <a class="carousel-control right" href="#myCarousel" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

    </a>

</div>

Solution 4:

It is worth noting for me, I was failing to link to the bootstrap.js files properly. If you are simply using the examples in the 4.0 beta files from GetBootstrap.com you can likely use the following at the end of your file.

<script src="assets/js/vendor/popper.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>

If you are projecting low traffic and don't want to include the files directly in your project you can use the CDN.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>