如何使用 Bootstrap 轮播更改幻灯片？

Question

我正在创建一个投资组合网站并希望有 2 个不同的部分。第一个是简单的介绍，第二个是轮播，我可以在其中填充项目等其他内容。我已经能够在大多数情况下实现这两个功能，但是，我无法让我的旋转木马正确切换到下一个项目。第一次单击 next/prev 图标时，我的文本会略微向下移动页面，但随后仍停留在第一张幻灯片上，不再响应。

此外，我注意到在点击指标之前，我的地址显示为 "LocalHost/src/index.html#"。然后在点击一个指标后，我得到 "LocalHost/src/index.html#myCarousel"。我不确定这是否有帮助，但我觉得任何其他信息都会有用。

我相信我完全遵循了 bootstrap 教程（以及单独的教程），所以我完全不知道为什么我会遇到这个问题。任何帮助将不胜感激！

index.html

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

    <!-- Bootstrap & other CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="./index.css">
   
    <title>Attempted Portfolio</title>
  </head>
  <body>
    <div class="intro-container">
      <div class="container">
        <h1>
          My Name The
          <span class="txt-type" data-wait="3000" data-words ='["Developer", "Designer", "Creator"]'></span>
        </h1>
        <h2>Welcome to my website</h2>
      </div>
    </div>

<!-- Carousel -->
<div id="myCarousel" class="carousel slide" 
data-ride="carousel">

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

    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="container">
          <h1>First Headline</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna 
            aliqua. Luctus venenatis lectus magna fringilla urna. Libero 
            nunc consequat interdum varius. Egestas diam in arcu cursus
            euismod quis viverra. Nunc id cursus metus aliquam eleifend 
            mi in.</p>
        </div>
      </div>

      <div class="carousel-item">
        <div class="container">
          <h1>Second Headline</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna 
            aliqua. Luctus venenatis lectus magna fringilla urna. Libero 
            nunc consequat interdum varius. Egestas diam in arcu cursus
            euismod quis viverra. Nunc id cursus metus aliquam eleifend 
            mi in.</p>
        </div>
      </div>
    </div>

  <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

      <script src="app.js"></script>
  </body>
</html>

index.css

@import url('https://fonts.googleapis.com/css?family=Raleway:200,100,400');

body {
    font-family: 'Raleway', sans-serif;
    height: 100vh;
    color: #fff5f7;
    overflow: scroll;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 3rem;
}

.intro-container {
  background: #ffb7c5;
  color: #fff8b7;
  height: 100vh;
}

.carousel-item {
  background-color: #fff0f2;
  color: #ffb7c5;
  height: 100vh;
}

h1, h2 {
    font-weight: 200;  
    margin: 0.4rem;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 1.5rem;
}

/* Cursor Animation */
.txt-type > .txt {
  border-right: 0.2rem solid #fff5f7;
}

@media(min-width: 1200px) {
 h1 {
     font-size: 3rem;
 }
}

@media(max-width: 800px) {
    .container {
        padding: 0 1rem;
    }

    h1 {
        font-size: 1.5rem;
    }
}

@media(max-width: 500px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1rem;
    }
}

Answer 1

您忘记在正文底部添加 CDN Bootstrap 或 link 您的 bootstrap javascript。

这里：

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

Answer 2

要工作，只需包含此 jQuery、Popper.js 和 bootstrap js CDN 即可。

请注意，jQuery 必须在前面，然后是 Popper.js，然后是我们的 JavaScript 插件。

有关详细信息，请单击 here

<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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

您可以将这些脚本添加到 head 标签或 body 的底部。

如何使用 Bootstrap 轮播更改幻灯片？

How to change slides using Bootstrap Carousel?

javascript

css

carousel

bootstrap-4