Why my Carousel Indicators in Bootstrap are not working?

Question

The indicators of my carousel are not displayed on the screen. I followed multiple tutorials and they make carousel indicators by using <ol> tags, but when I write similar code it does not run or show carousel indicators.

 .carousel-item { height: 32rem; background: #777; } h2 { font-size: 300%; color: rgb(252, 255, 222); font-weight: 600; } p { font-size: 150%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 500; }.btn { background-color: rgba(214, 32, 87, 0.685); } a { font-size: 150%; } #items a:hover { background-color: rgba(148, 8, 50, 0.685); }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="js/bootstrap.js"></script> <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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div id="my_carousel" class="carousel slider" data-ride="carousel" data-interval="1000"> <ol class="carousel-indicators"> <li data-target="#my_carousel" data-slide-to="0" class="active"></li> <li data-target="#my_carousel" data-slide-to="1"></li> <li data-target="#my_carousel" data-slide-to="2"></li> <li data-target="#my_carousel" data-slide-to="3"></li> <li data-target="#my_carousel" data-slide-to="4"></li> <li data-target="#my_carousel" data-slide-to="5"></li> <li data-target="#my_carousel" data-slide-to="6"></li> </ol> <div id="items" class="carousel-inner"> <div class="carousel-item active"> <img src="images/pizza.PNG" alt="Image Not Available" class="d-block w-100"> <div class="carousel-caption d-none d-md-block"> <h2>Delicious Pizza</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p> <a href="#" class="btn btn-lg text-center text-light">Order Now</a> </div> </div> <div class="carousel-item"> <img src="images/chickenplatter.jpg" alt="Image Not Available" class="d-block w-100"> <div class="carousel-caption d-none d-md-block"> <h2>Delicious Platter</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p> <a href="#" class="btn btn-lg text-center text-light">Order Now</a> </div> </div> <div class="carousel-item"> <img src="images/ssoupp.PNG" alt="Image Not Available" class="d-block w-100"> <div class="carousel-caption d-none d-md-block"> <h2>Special Lamb Soup</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p> <a href="#" class="btn btn-lg text-center text-light">Order Now</a> </div> </div> <div class="carousel-item"> <img src="images/biryani.jpg" alt="Image Not Available" class="d-block w-100"> <div class="carousel-caption d-none d-md-block"> <h2>Bombay Biryani</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p> <a href="#" class="btn btn-lg text-center text-light">Order Now</a> </div> </div> <div class="carousel-item"> <img src="images/chicken karahi.PNG" alt="Image Not Available" class="d-block w-100"> <div class="carousel-caption d-none d-md-block"> <h2>Mutton & Chicken Karahi</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p> <a href="#" class="btn btn-lg text-center text-light">Order Now</a> </div> </div> <div class="carousel-item"> <img src="images/rice.PNG" alt="Image Not Available" class="d-block w-100"> <div class="carousel-caption d-none d-md-block"> <h2>Dumpukht Pulao</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p> <a href="#" class="btn btn-lg text-center text-light">Order Now</a> </div> </div> <div class="carousel-item"> <img src="images/chinesesoup.PNG" alt="Image Not Available" class="d-block w-100"> <div class="carousel-caption d-none d-md-block"> <h2>Chinese Seafood Soup</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p> <a href="#" class="btn btn-lg text-center text-light">Order Now</a> </div> </div> </div> <div> <a href="#my_carousel" class="carousel-control-prev " role="button" data-slide="prev"> <span class="carousel-control-prev-icon" style="width: 36%; height: 4rem; margin-right: 5rem;"></span> </a> <a href="#my_carousel" class="carousel-control-next" data-slide="next"> <span class="carousel-control-next-icon" style="width: 36%; height: 4rem; margin-left: 5rem;"></span> </a> </div> </div>

Any help will be greatly appreciated. Thanks in advance.

It would be also very nice if anyone could guide me how to include javascript popperly and jQuery files by CDN path and by downloading the above mentioned files.

Thank you so much.

Answer 1

 <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head>

Remove script and link tag and paste this code. it works like a charm. we include any cdn link or script tag in head section and you haven't added any head tag in your file. that's why its not working. otherwise your code is up to date.