Блог

Главная - Вопросы по программированию - Карусель начальной загрузки не скользит

Карусель начальной загрузки не скользит

#jquery #twitter-bootstrap

#jquery #twitter-bootstrap

Вопрос:

Я новичок в bootstrap, пытающийся создать блог. У меня две проблемы с моей первой страницей (домашняя страница):

  1. Навигационная кнопка не отображает меню небольшого размера
  2. Слайд карусели не работает. Это проблема с jQuery. Я следую курсу с 2017 года, так что, может быть, скрипт src не обновляется?

Спасибо за вашу помощь, любые советы приветствуются 🙂

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">

    <title>Bootstrap Exemple</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <style>
     body {
        padding-top: 3.5rem;
    }
    .jumbotron {
        padding: 4rem 2rem;
        margin-bottom: 2rem;
        background-color: var(--bs-light);
        border-radius: .3rem;  
    }

    </style>
  </head>

  <body>

    <!-- Barre de Navigation -->

    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<!-- Jumbotron Header -->

<div class="jumbotron">
  <div class="container">
    <div class="row">
        <div class="col-md-4">
            <!-- <img src="https://via.placeholder.com/450x250" class="img-fluid d-none d-sm-block"> -->
            <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="https://via.placeholder.com/450x250/fff?text=1erslide" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                  <img src="https://via.placeholder.com/450x250/222?text=2emeslide" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                  <img src="https://via.placeholder.com/450x250/333?text=3emeslide" class="d-block w-100" alt="...">
                </div>
              </div>
            </div>
        </div>
        <div class="col-md-8">
            <h1>Hello World</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem rem sunt inventore dicta fugit unde quia nam sapiente voluptas officiis! Numquam ad, libero ullam laborum obcaecati, unde repudiandae voluptatibus quos.</p>
            
            <button type="button" class="btn btn-secondary">Secondary</button>
        </div>
    </div>
  </div>
</div>

<!-- MAIN -->

<div class="container">
    <div class="row">
        <!-- Side Bar -->
        <div class="col-md-3">
            <h3>Menu</h3>
            <br>
            <ol>
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Nulla volutpat aliquam velit
                <ul>
                  <li>Phasellus iaculis neque</li>
                  <li>Purus sodales ultricies</li>
                </ul>
              </li>
              <li>Faucibus porta lacus fringilla vel</li>
            </ol>

            
        </div>
        <div class="col-md-8 mx-auto">

            <!-- 1ère rangée -->

            <div class="row">           
                <div class="col-md-6">
                    <div class="card">
                      <img src="https://via.placeholder.com/350x150" class="img-fluid">
                      <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                      </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card">
                      <img src="https://via.placeholder.com/350x150" class="img-fluid">
                      <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                      </div>
                    </div>
                </div>
            </div>
            <br>

            <!-- 2ème rangée -->
            
            <div class="row">           
                <div class="col-md-6">
                    <h2>Les enjeux</h2>
                    <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit sunt, facilis, illo cupiditate sint autem culpa odio dicta fugiat rem distinctio et sequi, modi accusamus eum cumque nulla vel. Illum?</p>
                    <button type="button" class="btn btn-outline-primary">En savoir plus</button>
                </div>

                <div class="col-md-6">
                    <h2>Les enjeux</h2>
                    <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit sunt, facilis, illo cupiditate sint autem culpa odio dicta fugiat rem distinctio et sequi, modi accusamus eum cumque nulla vel. Illum?</p>
                    <button type="button" class="btn btn-outline-primary">En savoir plus</button>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>

<br><hr>
<!-- Footer -->

<footer class="text-center">
    <p>amp;copy;company 2020</p>
</footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
 
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
  </body>
</html>

Ответ №1:

Следующие изменения, которые я внес в ваш код :

  • Получите стабильную версию начальной загрузки с официального сайта начальной загрузки (https://getbootstrap.com/docs/4.0/getting-started/introduction /)
  • Затем я внес пару изменений в имя класса, где удалено bs 
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">

    <title>Bootstrap Exemple</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <style>
     body {
        padding-top: 3.5rem;
    }
    .jumbotron {
        padding: 4rem 2rem;
        margin-bottom: 2rem;
        background-color: var(--bs-light);
        border-radius: .3rem;  
    }

    </style>
  </head>

  <body>

    <!-- Barre de Navigation -->

    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<!-- Jumbotron Header -->

<div class="jumbotron">
  <div class="container">
    <div class="row">
        <div class="col-md-4">
            <!-- <img src="https://via.placeholder.com/450x250" class="img-fluid d-none d-sm-block"> -->
            <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="https://via.placeholder.com/450x250/fff?text=1erslide" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                  <img src="https://via.placeholder.com/450x250/222?text=2emeslide" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                  <img src="https://via.placeholder.com/450x250/333?text=3emeslide" class="d-block w-100" alt="...">
                </div>
              </div>
            </div>
        </div>
        <div class="col-md-8">
            <h1>Hello World</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem rem sunt inventore dicta fugit unde quia nam sapiente voluptas officiis! Numquam ad, libero ullam laborum obcaecati, unde repudiandae voluptatibus quos.</p>
            
            <button type="button" class="btn btn-secondary">Secondary</button>
        </div>
    </div>
  </div>
</div>

<!-- MAIN -->

<div class="container">
    <div class="row">
        <!-- Side Bar -->
        <div class="col-md-3">
            <h3>Menu</h3>
            <br>
            <ol>
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Nulla volutpat aliquam velit
                <ul>
                  <li>Phasellus iaculis neque</li>
                  <li>Purus sodales ultricies</li>
                </ul>
              </li>
              <li>Faucibus porta lacus fringilla vel</li>
            </ol>

            
        </div>
        <div class="col-md-8 mx-auto">

            <!-- 1ère rangée -->

            <div class="row">           
                <div class="col-md-6">
                    <div class="card">
                      <img src="https://via.placeholder.com/350x150" class="img-fluid">
                      <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                      </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card">
                      <img src="https://via.placeholder.com/350x150" class="img-fluid">
                      <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                      </div>
                    </div>
                </div>
            </div>
            <br>

            <!-- 2ème rangée -->
            
            <div class="row">           
                <div class="col-md-6">
                    <h2>Les enjeux</h2>
                    <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit sunt, facilis, illo cupiditate sint autem culpa odio dicta fugiat rem distinctio et sequi, modi accusamus eum cumque nulla vel. Illum?</p>
                    <button type="button" class="btn btn-outline-primary">En savoir plus</button>
                </div>

                <div class="col-md-6">
                    <h2>Les enjeux</h2>
                    <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit sunt, facilis, illo cupiditate sint autem culpa odio dicta fugiat rem distinctio et sequi, modi accusamus eum cumque nulla vel. Illum?</p>
                    <button type="button" class="btn btn-outline-primary">En savoir plus</button>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>

<br><hr>
<!-- Footer -->

<footer class="text-center">
    <p>amp;copy;company 2020</p>
</footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
 <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>
  </body>
</html>

Комментарии:

1. Пожалуйста, объясните, что вы сделали по-другому, чтобы устранить проблему. Действительно очень сложно найти исправление из вашего ответа.

2. Да, я добавлял только детали. Добавлено.

3. Вау, спасибо, Атул. Я также обнаружил, что именно bs из data-bs-ride создавал проблему. Поэтому я удалил ее. Вы внесли какие-либо изменения в навигацию? Да, нелегко увидеть разницу 🙂 Не стесняйтесь комментировать мой код. Сегодня я буду работать над настройкой страницы, заголовка, навигации и т. Д. Спасибо пирату за ваш ответ!

4. Nav Также изменилось только имя класса. Пожалуйста, примите ответ, если он решает вашу проблему. Спасибо