Question

我一直在尝试设置一种方法来链接到我的引导程序轮播中的某些幻灯片。我已经尝试了 here 的所有解决方案，包括 javascript 和非 javascript 的。我曾尝试在主轮播 div 内外使用普通锚点、有序/无序列表和按钮。

到目前为止，我似乎无法让 data-slide-to、data-slide 或其他任何变体起作用。然而，下一张幻灯片和上一张幻灯片按钮工作得很好。我似乎无法链接到特定幻灯片。这些方法在最新版本的引导程序中是否过时了，还是我遗漏了什么？

我最近的迭代如下：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#myCarousel" data-target="#myCarousel" data-slide-to="0" class="active">Slide 1</a></li>
          <li data-target="#myCarousel" data-slide-to="1"><a href="#myCarousel" data-slide-to="1" data-target="#myCarousel" class="active">Slide 2</a></li>
          <li data-target="#myCarousel" data-slide-to="2"><a href="#myCarousel" data-slide-to="2" data-target="#myCarousel" class="active">Slide 3</a></li>
      </ol>
      <div class="carousel-inner">
            <div class="carousel-item active">
                Content 1
            </div>
            <div class="carousel-item">
                Content 2
            </div>
            <div class="carousel-item">
                Content 3
            </div>
      </div>
</div>

Answer 1

如果您参考 Bootstrap 的最新版本，即 v5，您必须在指标中使用 data-bs-slide-to 属性，并且您还必须提供自定义样式以适应其中的文本。这是供参考的页面 -
https://getbootstrap.com/docs/5.0/components/carousel/#with-indicators

你可以这样做 -

.carousel-item {
    height: 200px;
}

.carousel-indicators {
    bottom: -50px;
}

.carousel-indicators.carousel-indicators-numbers .indicators {
    text-indent: 0;
    width: 70px;
    text-align: center;
    height: 70px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 30px;
    color: white;
    font-size: 20px;
    background-color: #999;
    transition: all 0.25s ease;
}

.carousel-indicators-numbers .indicators.active,
.carousel-indicators-numbers .indicators:hover {
    background-color: #337ab7;
}

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
    <ol class="carousel-indicators carousel-indicators-numbers">
        <li class="active indicators" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-current="true" aria-label="Slide 1">Slide 3</li>
        <li class="indicators" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2">Slide 2</li>
        <li class="indicators" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" aria-label="Slide 3">Slide 1</li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            Content 1
        </div>
        <div class="carousel-item">
            Content 2
        </div>
        <div class="carousel-item">
            Content 3
        </div>
    </div>
</div>

希望这会有所帮助，如果您遇到任何问题，请告诉我。

链接到 Bootstrap 轮播中的特定幻灯片

1 个答案: