CODEWITHSUNDEEP
htmlcssbootstrap-4
Mi Mart
Mi Mart

Reputation: 33

Can't load Carousel - Bootstrap 4

I wanted to do Carousel from bootstrap, I followed the tutorial but the Carousel is not loading. I don't know how to solve this problem. I tried to check the documentation of the "Bootstrap" site but I think I did everything correct, so what's the problem?

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

  <title>Kwiaciarnia.pl</title>
  <meta name="description" content="Kwiaciarnia">
  <meta name="keywords" content="kwiaty, wesela, kościoły, ubiór kościoła">
  <meta name="author" content="Michał Martofel">
  <meta http-equiv="X-Ua-Compatible" content="IE=edge">

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="main.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Sniglet" rel="stylesheet">

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
</head>

<body>
  <main>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div id="my-slider" class="carousel slide" data-ride="carousel">

            <ol class="carousel-indicators">
              <li data-target="#my-slider" data-slide-to="0" class="active"></li>
              <li data-target="#my-slider" data-slide-to="1"></li>
              <li data-target="#my-slider" data-slide-to="2"></li>
            </ol>

            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img src="img/305.jpg" width="500px" height="300px" alt="flower" />
                <div class="carousel-caption">
                  <h2>Piękny kwiatek</h2>
                </div>
              </div>
              <div class="item">
                <img src="img/300.jpg" width="500px" height="300px" alt="flower" />
                <div class="carousel-caption">
                  <h2>Brzydki kwiatek</h2>
                </div>
              </div>
              <div class="item">
                <img src="img/271.jpg" width="500px" height="300px" alt="flower" />
                <div class="carousel-caption">
                  <h2>Śliczny kwiatek</h2>
                </div>
              </div>

            </div>

            <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>

            <a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>

          </div>

        </div>
      </div>
    </div>

  </main>

  <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="js/bootstrap.min.js"></script>

</body>
</html>

Did I forget about something? Or are there problems with bootstrap/jquery scripts?

Upvotes: 0

Views: 1966

Answers (1)

leonheess
leonheess

Reputation: 21381

You have to give all items (pictures) of the carousel the class carousel-item but you only gave them the class item. Same with the Previous and Next buttons. The classes should be carousel-control-prev and carousel-control-next but you only gave them the class carousel-control.

The rest seems to be working just fine! When handling Bootstrap you always have to look out for the classes since they have to be exactly right for it to work at all. (You could also probably remove the popper.js-script at the bottom since it is not used at all.)

So basically just change all <div class="item"> to <div class="carousel-item"> and add -next and -prev to the control classes as I did here:

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

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

  <title>Kwiaciarnia.pl</title>
  <meta name="description" content="Kwiaciarnia">
  <meta name="keywords" content="kwiaty, wesela, kościoły, ubiór kościoła">
  <meta name="author" content="Michał Martofel">
  <meta http-equiv="X-Ua-Compatible" content="IE=edge">

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="main.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Sniglet" rel="stylesheet">

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
</head>

<body>
  <main>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div id="my-slider" class="carousel slide" data-ride="carousel">

            <ol class="carousel-indicators">
              <li data-target="#my-slider" data-slide-to="0" class="active"></li>
              <li data-target="#my-slider" data-slide-to="1"></li>
              <li data-target="#my-slider" data-slide-to="2"></li>
            </ol>

            <div class="carousel-inner" role="listbox">
              <div class="carousel-item active">
                <img src="img/305.jpg" width="500px" height="300px" alt="flower" />
                <div class="carousel-caption">
                  <h2>Piękny kwiatek</h2>
                </div>
              </div>
              <div class="carousel-item">
                <img src="img/300.jpg" width="500px" height="300px" alt="flower" />
                <div class="carousel-caption">
                  <h2>Brzydki kwiatek</h2>
                </div>
              </div>
              <div class="carousel-item">
                <img src="img/271.jpg" width="500px" height="300px" alt="flower" />
                <div class="carousel-caption">
                  <h2>Śliczny kwiatek</h2>
                </div>
              </div>

            </div>

            <a class="left carousel-control-prev" href="#my-slider" role="button" data-slide="prev">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>

            <a class="right carousel-control-next" href="#my-slider" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>

          </div>

        </div>
      </div>
    </div>

  </main>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="js/bootstrap.min.js"></script>

</body>
</html>

Upvotes: 4

Related Questions