Home > Software engineering >  Bootstrap 5 Carousel Slide Indicator Not Working
Bootstrap 5 Carousel Slide Indicator Not Working

Time:03-21

I am new to web development & Bootstrap and was wondering if I could get some help. I currently am working on a carousel for a revamp of my mom's website, and everything besides the functionality of the slide indicator is working. Whenever you go to the prev/next image, the indicator will move, but if you click on the indicator button it does not take you to the given image. I cannot figure out what's wrong, probably something stupid like forgetting to close a div or something. My code is below.

Any help is appreciated, thanks <3

<!-- Landing Carousel -->
<section >

  <body>
    <div  id="carousel">
      <div id="carouselExampleCaptions"  data-bs-interval="7500" data-bs-ride="carousel">
        <!-- Slide Indicators -->
        <div >
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="0"  aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="1" aria-current="true" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="2" aria-current="true" aria-label="Slide 3"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="3" aria-current="true" aria-label="Slide 4"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="4" aria-current="true" aria-label="Slide 5"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="5" aria-current="true" aria-label="Slide 6"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="6" aria-current="true" aria-label="Slide 7"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="7" aria-current="true" aria-label="Slide 8">    
                    </button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="8" aria-current="true" aria-label="Slide 9"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="9" aria-current="true" aria-label="Slide 10"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="10" aria-current="true" aria-label="Slide 11"></button>
        </div>
        <div >
          <div >
            <img src="images/1.png" alt="First Picture of Katie"  />

          </div>
          <div >
            <img src="images/2.png" alt="First Picture of Katie"  />

          </div>
          <div >
            <img src="images/3.png" alt="First Picture of Katie"  />

          </div>
          <div >
            <img src="images/4.png" alt="First Picture of Katie"  />

          </div>
          <div >
            <img src="images/5.png" alt="First Picture of Katie"  />

          </div>
          <div >
            <img src="images/6.png" alt="First Picture of Katie"  />

          </div>
          <div >
            <img src="images/7.png" alt="First Picture of Katie"  />

          </div>
          <div >
            <img src="images/8.png" alt="First Picture of Katie"  />

          </div>
          <div >
            <img src="images/9.png" alt="First Picture of Katie"  />

          </div>
          <div >
            <img src="images/10.png" alt="First Picture of Katie"  />

          </div>
          <div >
            <img src="images/11.png" alt="First Picture of Katie"  />

          </div>
        </div>

        <!-- Buttons -->
        <div >

          <!-- Previous -->
          <button  type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                        <span 
                             
                            aria-hidden="true"
                        >
                        </span>
                        <span >Previous</span>
                    </button>

          <!-- Next -->
          <button  type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                        <span 
                             
                            aria-hidden="true"
                        >
                        </span>
                        <span >Next</span>
                    </button>
        </div>
      </div>
    </div>
  </body>
</section>

CodePudding user response:

This is working perfectly. Just add the following resources in head tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
    <!-- Landing Carousel -->
<section >
    <body>
        <div  id="carousel">
            <div
                id="carouselExampleCaptions" 
                
                data-bs-interval="7500"
                data-bs-ride="carousel"
            >
            <!-- Slide Indicators -->
                <div >
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="0"
                        
                        aria-current="true"
                        aria-label="Slide 1"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="1"
                        aria-current="true"
                        aria-label="Slide 2"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="2"
                        aria-current="true"
                        aria-label="Slide 3"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="3"
                        aria-current="true"
                        aria-label="Slide 4"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="4"
                        aria-current="true"
                        aria-label="Slide 5"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="5"
                        aria-current="true"
                        aria-label="Slide 6"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="6"
                        aria-current="true"
                        aria-label="Slide 7"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="7"
                        aria-current="true"
                        aria-label="Slide 8"
                    >    
                    </button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="8"
                        aria-current="true"
                        aria-label="Slide 9"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="9"
                        aria-current="true"
                        aria-label="Slide 10"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="10"
                        aria-current="true"
                        aria-label="Slide 11"
                    ></button>
                </div>
                <div >
                    <div >
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        
                        />

                    </div>
                    <div >
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        
                        />

                    </div>
                    <div >
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        
                        />

                    </div>
                    <div >
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        
                        />

                    </div>
                    <div >
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        
                        />

                    </div>
                    <div >
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        
                        />

                    </div>
                    <div >
                        <img 
                        src="ihttps://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        
                        />

                    </div>
                    <div >
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        
                        />

                    </div>
                    <div >
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        
                        />

                    </div>
                    <div >
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        
                        />

                    </div>
                    <div >
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        
                        />

                    </div>
                </div>

                <!-- Buttons -->
                <div >
                    
                    <!-- Previous -->
                    <button 
                         
                        type="button"
                        data-bs-target="#carouselExampleCaptions"
                        data-bs-slide="prev"
                    >
                        <span 
                             
                            aria-hidden="true"
                        >
                        </span>
                        <span >Previous</span>
                    </button>

                    <!-- Next -->
                    <button 
                         
                        type="button"
                        data-bs-target="#carouselExampleCaptions"
                        data-bs-slide="next"
                    >
                        <span 
                             
                            aria-hidden="true"
                        >
                        </span>
                        <span >Next</span>
                    </button>
                </div>
            </div>
        </div>
    </body>
</section>
</body>
<script>
</script>
</html>
  • Related