Не могу загрузить Карусель - Bootstrap 4 - PullRequest
Новая
       15

Не могу загрузить Карусель - Bootstrap 4

0 голосов
/ 12 марта 2019

Я хотел сделать Карусель из начальной загрузки, я следовал учебному пособию, но Карусель не загружается. Я не знаю, как решить эту проблему. Я пытался проверить документацию сайта "Bootstrap", но я думаю, что все сделал правильно, так в чем же проблема? 

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

Я о чем-то забыл? Или есть проблемы со скриптами начальной загрузки / jquery?

1 Ответ

4 голосов
/ 12 марта 2019

Вы должны дать всем предметам (изображениям) карусели класс carousel-item, но вы дали им только класс item. То же самое с кнопками Назад и Далее . Классы должны быть carousel-control-prev и carousel-control-next, но вы дали им только класс carousel-control.

Все остальное работает нормально! При работе с Bootstrap вы всегда должны обращать внимание на классы, поскольку они должны быть абсолютно правильными, чтобы он вообще работал. (Вы также можете удалить popper.js -скрипт внизу, так как он вообще не используется.)

Поэтому просто измените все <div class="item"> на <div class="carousel-item"> и добавьте -next и -prev к управляющим классам, как я сделал здесь: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...