javascript Bootstrap 5：添加制表符到滑块

我使用Bootstrap 5创建了滑块。当前结果为：

<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<div class="col-xl-6 col-md-12 ratio_65">
        <div class="row g-3">
          <div class="col-xl-12 col-sm-12">
            <div class="home-contain">
              <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100" alt="...">
                  </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Next</span>
                </button>
              </div>
              <div class="home-detail text-white p-center text-center">
                <div>
                  <h4 class="text-center">
                    <!--Organic Lifestyle-->
                  </h4>
                  <h5 class="text-center">
                    <!--Best Weekend Sales-->
                  </h5>
                </div>
              </div>
            </div>
          </div>
</div>
</div>

我阅读了关于carousel的引导文档，也尝试了搜索引擎中所有可用的“示例”。不幸的是，我没有办法达到这样的效果。
我试着得到效果，并添加名称每个滑块作为选项卡。任何人都可以小帮助我如何添加额外的选项卡像这样吗？我粘贴在这里的例子照片：

你是对的，Bootstrap不支持转盘滑块标签，但是因为Bootstrap使用数据属性data-bs-target和data-bs-slide-to作为指示符，所以你可以将它们应用到其他元素。
例如，将它们应用于转盘外部的列表，即滑块选项卡：

<ul class="custom-indicators">
  <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1">
    Slide 1
  </li>
  ...
</ul>

片段中的slider选项卡有更多的类来定位使用row和四列col的所有内容，只需单击<li>元素就可以将carousel设置为该幻灯片索引（0）。
要设置活动滑块选项卡的样式，请使用JavaScript，方法是在它上面切换一个类（如.active），然后使用CSS设置它的样式。
这里有两个基本的例子，分别使用Jquery和普通Javascript。

使用Jquery的解决方案

幸运的是，Bootstrap的carousel类公开了用于挂钩carousel功能的事件，比如slide.bs.carousel：

$('#carouselExampleIndicators').on('slide.bs.carousel', event => { ... });

当carousel切换到另一张幻灯片时，该函数将被触发。在内部访问事件属性to，它保存下一张幻灯片的索引。然后切换active类：

const nextSlide = event.to;
$('.custom-indicators li').removeClass('active');
$('.custom-indicators li[data-bs-slide-to=' + nextSlide + ']').addClass('active');

现在应用一些自定义CSS来设置选项卡的样式，这就是。下面是可以设置样式的自定义指示器的完整基本示例：
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

使用JavaScript的解决方案

这里有一个解决方案，它使用普通的Javascript来完成同样的事情，它循环遍历所有的slider标签，删除类active，并将其应用到包含下一张幻灯片索引（data-bs-slide-to="?"）的slider标签上。

var carousel = document.querySelector('#carouselExampleIndicators');

carousel.addEventListener('slide.bs.carousel', event => {
  var nextSlide = event.to;
  var customIndicators = document.querySelectorAll('.custom-indicators li');
  for (var i = 0; i < customIndicators.length; i++) {
    customIndicators[i].classList.remove('active');
  }
  document.querySelector('.custom-indicators li[data-bs-slide-to="' + nextSlide + '"]').classList.add('active');
});

.custom-indicators li {
  border-top: 3px solid transparent;
}

.custom-indicators li.active {
  color: black;
  font-weight: bold;
  border-top: 3px solid black;
}

<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<div class="col-xl-6 col-md-12 ratio_65">
  <div class="row g-3">
    <div class="col-xl-12 col-sm-12">
      <div class="home-contain">
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
                alt="...">
            </div>
            <div class="carousel-item">
              <img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
                alt="...">
            </div>
            <div class="carousel-item">
              <img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
                alt="...">
            </div>
            <div class="carousel-item">
              <img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
                alt="...">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
        <div class="">
          <ul class="list-unstyled row gx-0 text-center text-secondary custom-indicators" role="button">
            <li class="col p-2 active" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1">
              Slide 1
            </li>
            <li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">
              Slide 2
            </li>
            <li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">
              Slide 3
            </li>
            <li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4">
              Slide 4
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

javascript Bootstrap 5：添加制表符到滑块

1条答案

使用Jquery的解决方案

使用JavaScript的解决方案

相关问题

热门标签

最新问答