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:

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

Solution 2:

You need to add above indicators

<divid="carousel-example-generic"class="carousel slide"data-ride="carousel"><!-- Indicators --><olclass="carousel-indicators"><lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li><lidata-target="#carousel-example-generic"data-slide-to="1"></li><lidata-target="#carousel-example-generic"data-slide-to="2"></li></ol><!-- Wrapper for slides --><divclass="carousel-inner"><divclass="item active"><imgsrc="..."alt="..."><divclass="carousel-caption">
        ...
      </div></div>
    ...
  </div><!-- Controls --><aclass="left carousel-control"href="#carousel-example-generic"data-slide="prev"><spanclass="glyphicon glyphicon-chevron-left"></span></a><aclass="right carousel-control"href="#carousel-example-generic"data-slide="next"><spanclass="glyphicon glyphicon-chevron-right"></span></a></div>

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

Thanks

Solution 3:

<divid="myCarousel"class="carousel slide"data-ride="carousel"><!-- Carousel indicators --><olclass="carousel-indicators"><lidata-target="#myCarousel"data-slide-to="0"class="active"></li><lidata-target="#myCarousel"data-slide-to="1"></li><lidata-target="#myCarousel"data-slide-to="2"></li></ol><!-- Carousel items --><divclass="carousel-inner"><divclass="active item"><h2>Slide 1</h2><divclass="carousel-caption"><h3>First slide label</h3><p>Lorem ipsum dolor sit amet consectetur…</p></div></div><divclass="item"><h2>Slide 2</h2><divclass="carousel-caption"><h3>Second slide label</h3><p>Aliquam sit amet gravida nibh, facilisis gravida…</p></div></div><divclass="item"><h2>Slide 3</h2><divclass="carousel-caption"><h3>Third slide label</h3><p>Praesent commodo cursus magna vel…</p></div></div></div><!-- Carousel nav --><aclass="carousel-control left"href="#myCarousel"data-slide="prev"><spanclass="glyphicon glyphicon-chevron-left"></span></a><aclass="carousel-control right"href="#myCarousel"data-slide="next"><spanclass="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.

<scriptsrc="assets/js/vendor/popper.min.js"></script><scriptsrc="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.

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