文章/答案/技术大牛

发布

社区首页 >问答首页 >我的鞋带旋转木马没有给幻灯片

问我的鞋带旋转木马没有给幻灯片
EN

Stack Overflow用户

提问于 2022-07-05 15:23:58

回答 2查看 48关注 0票数 1

我复制了一个引导旋转木马代码来理解它是如何工作的，但是代码并没有给我想要的结果。幻灯片不是moving.The，第一张幻灯片只是停滞不前。拜托，你觉得我做什么好呢？以下是html和css代码。我还包括了它的屏幕截图，以获得更多的澄清。

html

  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color: red;">
        <img src="..." class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item" style="background-color: yellow;">
      <img src="..." class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item" style="background-color: purple;">
      <img src="..." class="d-block w-100" alt="Third slide">
    </div>
  </div>
</div>

css

.carousel-item {
    height: 500px;   
}

html

css

twitter-bootstrap

bootstrap-4

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-07-05 16:16:08

您需要具有与引导相关的适当的id和data-ride的正确的父级。然后，您需要为自举4。添加相对JS和CSS。

.carousel-item {
  height: 500px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">


<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color: red;">
      <img src="..." class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item" style="background-color: yellow;">
      <img src="..." class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item" style="background-color: purple;">
      <img src="..." class="d-block w-100" alt="Third slide">
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

票数 1

Stack Overflow用户

发布于 2022-07-05 15:26:54

将此代码添加到.html文件的"head“标记中。

你为什么要加这个？答案是，每当您使用第三方库时，要么您需要在您的项目中安装它，要么使用它的CDN来使其工作。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72871911

复制

相似问题

问我的鞋带旋转木马没有给幻灯片
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的鞋带旋转木马没有给幻灯片EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的鞋带旋转木马没有给幻灯片
EN