我的bootstrap旋转木马没有给幻灯片

发布于 2025-02-13 07:55:47 字数 861 浏览 2 评论 0原文

我复制了一个引导旋转木马代码以了解其工作原理,但该代码并没有给我带来所需的结果。幻灯片没有移动。第一张幻灯片只是停滞不前。请您提出什么?这是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代码的smippet”

I copied a Bootstrap carousel code to understand how it works but the code isn't giving me the desired result. The slides aren't moving.The first slide is just stagnant. Please what do you reccommend I do? Here are the html and css codes. I also included a screenshot of it for more clarification.

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

Snippet of my html and css codes

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

じее 2025-02-20 07:55:47

您需要拥有与Bootstrap相关的适当IDdata-ride的适当父。然后,您需要为

.carousel-item {
  height: 500px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

You need to have the proper parent with the appropriate id and data-ride that correlates with Bootstrap. Then you need to add the relative JS and CSS for Bootstrap 4.

.carousel-item {
  height: 500px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

祁梦 2025-02-20 07:55:47

在您的.html文件的“头”标签中添加此代码。

为什么需要添加此?答案是,每当您使用第三方库时,您需要将其安装在项目中,或者使用其CDN来使其正常工作。

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

Add this code inside "head" tag of your .html file.

Why do you need to add this? The answer is whenever you are using a 3rd party library either you need to install it in your project or use its CDN to make it work.

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文