Bootstrap Карусель рендеринга, но не скольжения.Левые правые значки также не работают - PullRequest
Новая
       5

Bootstrap Карусель рендеринга, но не скольжения.Левые правые значки также не работают

3 голосов
/ 03 апреля 2019

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

С моим изображением тоже все в порядке, так что это не так.

Вот мой код: https://jsfiddle.net/5vh42ufs/4/

<div id="mainPics" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                <ol class="carousel-indicators">
                <li data-target="#mainPics" data-slide-to="0" class="active"></li>
                <li data-target="#mainPics" data-slide-to="1"></li>
                <li data-target="#mainPics" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="img/ball.png" alt="Chania">
                    </div>

                    <div class="item">
                        <img src="img/ball.png" alt="Chicago">
                    </div>

                    <div class="item">
                        <img src="img/ball.png" alt="New York">
                    </div>
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#mainPics" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#mainPics" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
                </a>
            </div>

1 Ответ

2 голосов
/ 03 апреля 2019

Вам нужно импортировать CDN Bootstrap JavaScript после импорта jQuery.Для Bootstrap 3.4.0 вы можете добавить следующее: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>.

Один только импорт jQuery просто дает вам доступ к библиотеке jQuery, которая сама по себе ничего не делает.Bootstrap по-прежнему имеет свой собственный файл JavaScript, который содержит весь код для анимации.Поскольку Bootstrap использует jQuery, а не vanilla JS, убедитесь, что вы импортируете CDN после , когда вы импортируете jQuery, иначе он не будет работать. 

nav {
  width: 70%;
  margin: auto;
  margin-top: 50px;
}

.navbar-inverse .navbar-nav>li>a {
  color: white;
}

.navbar-inverse .navbar-brand {
  color: white;
}

.navbar-inverse .navbar-nav>li>a:hover {
  color: darkred;
}

.navbar-inverse .navbar-brand:hover {
  color: darkred;
}

body {
  background: url(../img/back.jpg);
  background-color: black;
  background-position: center;
  background-size: 100% 100%;
  min-height: 1000px;
}

#content {
  background: url(../img/logo.png) no-repeat;
  background-size: 600px 600px;
  background-position: center;
  background-color: #222;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
  border-color: #080808;
  width: 70%;
  margin: auto;
  margin-top: 15px;
  margin-bottom: 50px;
  opacity: 0.95;
  min-height: 1000px;
}

p {
  color: white;
  width: 90%;
  margin: auto;
  font-size: 1.5em;
  margin-top: 15px;
}

h1 {
  color: white;
  text-align: center;
  padding-top: 15px;
  margin-bottom: 0px;
}

footer {
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  color: white;
}

#mainPics {
  margin: auto;
  margin-top: 15px;
  width: 70%;
  min-height: 500px;
}

#item {
  margin: auto;
  width: 80%;
}

.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
  margin: auto;
  margin-top: 15px;
  margin-bottom: 15px;
}
<!DOCTYPE html>
<html>

<head>
  <title>HMICSL - Home</title>
  <link rel="shortcut icon" href="img/ball.png" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/universal.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <nav class="mx-auto navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="index.html" id="deviceTypeNav">Home Page</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a href="teams.html">Teams</a></li>
      </ul>
    </div>
  </nav>
  <div id="content">

    <h1>Welcome to HMICSL</h1>

    <div id="mainPics" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#mainPics" data-slide-to="0" class="active"></li>
        <li data-target="#mainPics" data-slide-to="1"></li>
        <li data-target="#mainPics" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt="Chania">
        </div>

        <div class="item">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Aspen-PopulusTremuloides-2001-09-27.jpg/220px-Aspen-PopulusTremuloides-2001-09-27.jpg" alt="Chicago">
        </div>

        <div class="item">
          <img src="http://learnphotoediting.org/wp-content/uploads/tree-picture-live-oak-trees-for-sale-fast-growing-trees.jpg" alt="New York">
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control" href="#mainPics" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#mainPics" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...