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

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>

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