Getting Bootstrap Carousel slides to work-CodePudding

Im trying to implement bootstrap carousel slides, that show gif short clips when passed on to the next page. I've tried multiple ways including the Documentation in Bootstrap and answers from stackoverflow. The slide just wont pass to the next page.. could anyone offer any help?

  <div >
    <div >
      <h2>About me</h2>
      <ul style="list-style-type:none; text-align: left;">
        <li>languages: Java, JS, HTML, CSS</li>
        <li>Frameworks: Bootstrap, e</li>
        <li>Tools:</li>
        <li>Editor Journey:</li>
        <li>Operating System:</li>
      </ul>
    </div>
    <div >
      <div id="carouselExampleIndicators"  data-ride="carousel">
        <ol >
            <li data-target="#carouselExampleIndicators" data-slide-to="0" ></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        </ol>
        <div >
          <div >
            <h2>Project 1</h2>
            <img  src="videos/QuickGame.gif" alt="First Game">
            <em>Shooter Game, Java</em>
          </div>
          <div >
            <h2>Project 2</h2>
            <img  src="videos/DiceGame.gif" alt="Dice Game">
            <em>Dice Game, JavaScript</em>
          </div>
        </div>
        <a  href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span  aria-hidden="true"></span>
          <span >Previous</span>
        </a>
        <a  href="#carouselExampleIndicators" role="button" data-slide="next">
          <span  aria-hidden="true"></span>
          <span >Next</span>
        </a>
      </div>
    </div>
  </div>

CodePudding user response：

Did you included the below JS before the closing </body> tag?

<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>

Source: https://getbootstrap.com/docs/4.0/getting-started/introduction/

CodePudding user response：

As the official bootstrap-4 documentation says:

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

You need to include these <script> right before your </body>:

<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>

CodePudding user response：

In official docs the Carousel component for all slide behaviors, controls, and indicators, requires JavaScript. As we can read more:

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper, and our own JavaScript plugins. We use jQuery’s slim build, but the full version is also supported.

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

Your code (suggests working harder on it), with links hooked up properly, [email protected]

<!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>

  <div >
    <div >
      <h2>About me</h2>
      <ul style="list-style-type:none; text-align: left;">
        <li>languages: Java, JS, HTML, CSS</li>
        <li>Frameworks: Bootstrap, e</li>
        <li>Tools:</li>
        <li>Editor Journey:</li>
        <li>Operating System:</li>
      </ul>
    </div>
    <div >
      <div id="carouselExampleIndicators"  data-ride="carousel">
        <ol >
          <li data-target="#carouselExampleIndicators" data-slide-to="0" ></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        </ol>
        <div >
          <div >
            <h2>Project 1</h2>
            <img  src="https://images.unsplash.com/photo-1639975721073-3ef4e6d2d4cf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzNXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="First Game">
            <em>Shooter Game, Java</em>
          </div>
          <div >
            <h2>Project 2</h2>
            <img  src="https://images.unsplash.com/photo-1640043285014-3d1e095b3ebe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" alt="Dice Game">
            <em>Dice Game, JavaScript</em>
          </div>
        </div>
        <a  href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span  aria-hidden="true"></span>
          <span >Previous</span>
        </a>
        <a  href="#carouselExampleIndicators" role="button" data-slide="next">
          <span  aria-hidden="true"></span>
          <span >Next</span>
        </a>
      </div>
    </div>
  </div>

  <!-- 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>

</body>

</html>