slides not moving in Bootstrap-CodePudding

I just started using bootstrap, I am trying to use the carousel slide, I am adding the buttons as well as automatic slide. I implemented the bootstrap carousel slide in my code but it is just not moving. I press the button and it still wont move. I don't know what I am doing wrong. this is my code;

<section id="testimonials">
      <div id="carouselControls"  data-bs-ride="carousel">
        <div >
          <div >
            <h2>
              I no longer have to sniff other dogs for love. I've found the
              hottest Corgi on TinDog. Woof.
            </h2>
            <img
              
              src="images/dog-img.jpg"
              alt="dog-profile"
            />
            <em>Pebbles, New York</em>
          </div>
          <div >
            <h2 >
              My dog used to be so lonely, but with the TinDog's help, He has
              found the love of his life. I think
            </h2>
            <img
              src="images/lady-img.jpg"
              alt="lady-profile"
              
            />
            <em>Beverly, illinois</em>
          </div>
        </div>
        <button
          
          type="button"
          data-bs-target="#carouselControls"
          data-bs-slide="prev"
        >
          <span ></span>
        </button>
        <button
          
          type="button"
          data-bs-target="#carouselControls"
          data-bs-slide="next"
        >
          <span ></span>
        </button>
      </div>
    </section>

CodePudding user response：

You probably forget to add Bootstrap's CSS and JS file.

Method 1:

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

Place one of the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper, and then our JavaScript plugins.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

Methond 2:

Using the starter template

<!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-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Method 3:

Download Bootstrap to get the compiled CSS and JavaScript from here.

Please also check the source here.

CodePudding user response：

When I added the bootstrap.min.js and bootstrap.min.css reference to the project, I observed that it moves both automatically and manually:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">
    </script>
    <title>Document</title>
</head>

<body>
    <section id="testimonials">
        <div id="carouselControls"  data-bs-ride="carousel">
            <div >
                <div  style="margin-top: 50px;">
                    <h2>
                        I no longer have to sniff other dogs for love. I've found the
                        hottest Corgi on TinDog. Woof.
                    </h2>
                    <img   src="https://via.placeholder.com/1400x300.png" alt="dog-profile" />
                    <em>Pebbles, New York</em>
                </div>
                <div  style="margin-top: 50px;">
                    <h2 >
                        My dog used to be so lonely, but with the TinDog's help, He has
                        found the love of his life. I think
                    </h2>
                    <img src="https://via.placeholder.com/1400x300.png" alt="lady-profile"  />
                    <em>Beverly, illinois</em>
                </div>
            </div>
            <button  type="button" data-bs-target="#carouselControls"
                data-bs-slide="prev">
                <span ></span>
            </button>
            <button  type="button" data-bs-target="#carouselControls"
                data-bs-slide="next">
                <span ></span>
            </button>
        </div>
    </section>
</body>

</html>