Bootstrap Carousel not changing slides-CodePudding

I am trying to build a carousel using bootstrap and am using one of the templates. However, the slides don't change when I click the next and previous arrow buttons, and it will transition on it's own to slide 2 after an incorrect interval, but never to slide 3. I don't know what the issue is because I have included both jquery.js and boostrap.js with the correct file paths.

Here is the code:

    <!-- Calling jquery first -->
    <script language="JavaScript" type="module" type="text/javascript" src="../node_modules/jquery/src/jquery.js"></script>
    <script language="JavaScript" type="module" type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <!--Carousel-->
    <script type="module" src="./assets/js/main.js"></script>
    <div >
        <div >
            <div id="mainCarousel"  data-bs-ride="carousel">
                <ol >
                  <li data-target="#mainCarousel" data-slide-to="0" ></li>
                  <li data-target="#mainCarousel" data-slide-to="1"></li>
                  <li data-target="#mainCarousel" data-slide-to="2"></li>
                </ol>
                <div >
                  <div >
                    <img  src="./assets/images/one.png" alt="First slide">
                    <div >
                        <h2>First Slide Label</h2>
                        <p>Text for the first slide</p>
                      </div>
                  </div>
                  <div >
                    <img  src="./assets/images/two.png" alt="Second slide">
                    <div >
                        <h5>Second Slide Label</h5>
                        <p>Text for second slide</p>
                      </div>
                  </div>
                  <div >
                    <img  src="./assets/images/three.png" alt="Third slide">
                    <div >
                        <h5>Third Slide Label</h5>
                        <p>Text for third slide</p>
                      </div>
                  </div>
                </div>
                <a  href="#mainCarousel" role="button" data-slide="prev">
                  <span  aria-hidden="true"></span>
                  <span ></span>
                </a>
                <a  href="#mainCarousel" role="button" data-slide="next">
                  <span  aria-hidden="true"></span>
                  <span ></span>
                </a>
              </div>
        </div>
    </div>
    
    <script language="JavaScript" type="text/javascript">
        $(document).ready(function(){
            $('.carousel').carousel({
            interval: 1000
            })
        });    
    </script>

CodePudding user response：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

add this script tag before closing body tag.

CodePudding user response：

Make sure that the bootstrap CSS is being called within the head element, and make sure to load all script tags before the body closing tag to ensure that it the javascript gets loaded after the site's UI is rendered. This is to avoid loading speed. Also make sure your not overriding any CSS from bootstrap as that is very common.

If none of the above work, please share a github link and ill happilly look over at the code and troubleshoot it with you.

video link on how i did it: https://www.loom.com/share/9254958ffcd54e49b82cb4b7bd5400c7

and the link to view the code: https://codepen.io/solit0123/pen/qBoyrpG

Here is a carousel I made with bootstrap specifically for you:

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <div >
    <div id="carouselExampleCaptions"  data-ride="carousel">
      <ol >
        <li data-target="#carouselExampleCaptions" data-slide-to="0" ></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
      </ol>
      <div >
        <div >
          <img src="https://via.placeholder.com/800"  alt="...">
          <div >
            <h5>First slide label</h5>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </div>
        </div>
        <div >
          <img src="https://via.placeholder.com/800"  alt="...">
          <div >
            <h5>Second slide label</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div >
          <img src="https://via.placeholder.com/800"  alt="...">
          <div >
            <h5>Third slide label</h5>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </div>
        </div>
      </div>
      <a  href="#carouselExampleCaptions" role="button" data-slide="prev">
        <span  aria-hidden="true"></span>
        <span >Previous</span>
      </a>
      <a  href="#carouselExampleCaptions" role="button" data-slide="next">
        <span  aria-hidden="true"></span>
        <span >Next</span>
      </a>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
</body>

</html>