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

Question

I've been attempting to setup a way to link to certain slides within my bootstrap carousel. I've attempted all of the solutions from here , including the both the javascript ones and non-javascript ones. I've attempted using normal anchors, ordered/unordered lists, and buttons, both inside and outside the main carousel div.

So far it seems I can't get any variation of data-slide-to, data-slide, or anything else to work. The next slide and previous slide buttons, however, work perfectly fine. I just can't seem to link to a specific slide. Are these methods outdated with the latest version of bootstrap, or is there something I'm missing?

My most recent iteration is below:

<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

If you refer to the latest version of Bootstrap ie v5, you have to use data-bs-slide-to property in the indicators, and also you have to give custom styles to fit the text inside them. Here is the page for reference -
https://getbootstrap.com/docs/5.0/components/carousel/#with-indicators

You can do something like this -

 .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>

Hope this helps, let me know if you're facing any issue.