CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Cameron Crane
Cameron Crane

Reputation: 317

Link to a specific slide in a Bootstrap carousel

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>

Upvotes: 0

Views: 1064

Answers (1)

Roshan Kanwar
Roshan Kanwar

Reputation: 271

If you refer to the latest version of Bootstrap i.e. 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.

Upvotes: 1

Related Questions