如何使用 Bootstrap Carousel 更改幻灯片？

Posted 2023-03-05

技术标签:

【中文标题】如何使用 Bootstrap Carousel 更改幻灯片？【英文标题】：How to change slides using Bootstrap Carousel? 【发布时间】：2021-01-23 03:25:03 【问题描述】：

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

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

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

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;

【问题讨论】：

【参考方案1】：

只需包含这个 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 底部。

【讨论】：

【参考方案2】：

您忘记在正文底部添加 CDN 引导程序或链接您的引导程序 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>

【讨论】：