Multi-slide Bootstrap 5 Carousel 组件
栏目分类:幻灯片 / 轮播图   发布日期:2021-09-15   浏览次数:

Bootstrap 5 的 JavaScript/CSS 扩展,允许一次显示多张幻灯片。

如何使用它:

1. 在文档中加载必要的 JavaScript 和 CSS 文件。

// Bootstrap 5 框架
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
 
// 自定义 JavaScript 和 CSS
<link rel="stylesheet" href="style.css"/>
<script src="scripts.js"></script>

2. 为多幻灯片 Bootstrap 5 轮播组件编写 HTML 代码。

<div class="row mx-auto my-auto justify-content-center">
  <div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">
              <div class="col-md-3">
                  <div class="card">
                      <div class="card-img">
                          <img src="/uploads/allimg/210915/0951224045-2.jpg" class="img-fluid">
                      </div>
                      <div class="card-img-overlay">Slide 1</div>
                  </div>
              </div>
          </div>
          <div class="carousel-item">
              <div class="col-md-3">
                  <div class="card">
                      <div class="card-img">
                          <img src="/uploads/allimg/210915/095122N08-3.jpg" class="img-fluid">
                      </div>
                      <div class="card-img-overlay">Slide 2</div>
                  </div>
              </div>
          </div>
          <div class="carousel-item">
              <div class="col-md-3">
                  <div class="card">
                      <div class="card-img">
                          <img src="/uploads/allimg/210915/0951224I4-4.jpg" class="img-fluid">
                      </div>
                      <div class="card-img-overlay">Slide 3</div>
                  </div>
              </div>
          </div>
          <div class="carousel-item">
              <div class="col-md-3">
                  <div class="card">
                      <div class="card-img">
                          <img src="/uploads/allimg/210915/0951223454-5.jpg" class="img-fluid">
                      </div>
                      <div class="card-img-overlay">Slide 4</div>
                  </div>
              </div>
          </div>
          <div class="carousel-item">
              <div class="col-md-3">
                  <div class="card">
                      <div class="card-img">
                          <img src="/uploads/allimg/210915/0951224P0-6.jpg" class="img-fluid">
                      </div>
                      <div class="card-img-overlay">Slide 5</div>
                  </div>
              </div>
          </div>
          <div class="carousel-item">
              <div class="col-md-3">
                  <div class="card">
                      <div class="card-img">
                          <img src="/uploads/allimg/210915/09512261S-7.jpg" class="img-fluid">
                      </div>
                      <div class="card-img-overlay">Slide 6</div>
                  </div>
              </div>
          </div>
      </div>
      <a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </a>
      <a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </a>
  </div>
</div>

官方网站:https://github.com/jibarradelgado/bootstrap5-carousel-multi

相关热词: bootstrapBootstrap 5轮播

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库