Как я могу исправить карусель начальной загрузки? - PullRequest
Новая
       6

Как я могу исправить карусель начальной загрузки?

0 голосов
/ 28 января 2019

Я студент и сейчас начинаю учиться кодировать.Я столкнулся с проблемой моей последней работы с загрузочной каруселью.Вот мой код: 

<!doctype html>
<html lang="en">
<head>
<title>Slider</title>
<meta charset="utf-8">
<!--BOOTSTRAP-->
<link href="cssboot/bootstrap.css" rel="stylesheet" type="text/css">
<!--MAIN CSS-->
<link href="cssmain/style.css" rel="stylesheet" type="text/css">
<!--FONT AWESOME-->
<link href="cssfont/all.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div>
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<!--DOT NAV-->
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<!--IMGS-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="myfullimg" src="img/1.jpg"/>
</div>
<div class="item">
<img class="myfullimg" src="img/2.jpg"/>
</div>
<div class="item">
<img class="myfullimg" src="img/3.jpg"/>
</div>
<div class="item">
<img class="myfullimg" src="img/4.jpg"/>
</div>
</div>
<!--NXT AND PREV BUTTONS-->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>  
</div>
</div>
</div>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.js"></script>

</body>
</html>

Вот мой основной CSS: 

@charset "utf-8";

.myfullimg {
width: 1347px;
height: 666px;
}

Я также использую этот файл CSS для другого файла HTML.Эта кнопка от начальной загрузки, и я немного настроил ее.

Я основал свой HTML-код из учебника на YouTube.Вот ссылка: https://www.youtube.com/watch?v=1FnMDubA25A&t=0s&list=PL41lfR-6DnOovY0t3nBg8Zb6aqm_H70mR&index=22

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

(уменьшение веб-страницы до 25%)

Вы можете увидеть навигацию по точкам, но когда янажмите это ничего не происходит.(увеличение веб-страницы до 100%)

Я использую текущую версию начальной загрузки и jquery.

Ответы [ 2 ]

0 голосов
/ 29 января 2019

У вас есть несколько проблем.Во-первых, и самое главное, ваша версия Bootstrap и разметка вашей карусели не совпадают.

Я рекомендую использовать оба последних варианта. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="https://i.ibb.co/jzf0D5Q/1.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://i.ibb.co/q1ZW1Jh/2.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://i.ibb.co/H4pPKmD/3.jpg" alt="Third slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://i.ibb.co/6gS07xN/4.jpg" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" 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>
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

В качестве примечания, вы должны загрузить CSS в голову и JavaScript перед закрытием </body>.

Последнее, но не менее важное, вы пропустилиpopper(.min).js (было tether(.min).js в более старых 4. * версиях).Без этого Bootstrap JS (включая карусель) не будет работать.

В случае сомнений, посетите официальный веб-сайт Bootstrap для примеров.

0 голосов
/ 29 января 2019

Сначала я хочу, чтобы вы знали, что вы используете альфа-версию начальной загрузки, сейчас доступна устаревшая версия 4.2.x.

Теперь, если вы хотите использовать карусель, вы должны также включить tether.js, чтобы вашссылки на скрипты будут выглядеть так: 

<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.js"></script>

Вы также можете скачать технику и использовать ее локально, как вы, используя jquery и bootstrap.bundle.

И если вы будете использовать текущую версию загрузчика, у вас естьиспользовать Popper.js 

<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
...