CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3carousel
John Doe
John Doe

Reputation: 95

How to add a button to only one carousel slide and not the remaining?

I want to add a button to only one of the carousel slides that once pressed takes you to another page. Couldn't figure out how to do this. Can someone show me an example of how this can be done.

Upvotes: 1

Views: 19902

Answers (2)

Tom
Tom

Reputation: 108

You can do so by setting the carousel's position to relative and then setting then placing your button within the you want the button to appear in. After that is done, you should set the buttons position to absolute. Once this is done, the button should appear on the carousel image and you just need to position it to where you would like it to be placed.

You can find an example of this in the answers to this similar question: CSS - position button inside image

Upvotes: 3

S.B
S.B

Reputation: 329

Here is an example of this using the built in carousel in bootstrap 3, with a button on the first slide.

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://placehold.it/1400x400" alt="slide">
        <div class="carousel-caption">
          <a href="https://www.google.co.uk/" target="_blank"><button type="button" class="btn btn-default">Read More</button></a>
        </div>
      </div>

      <div class="item">
        <img src="http://placehold.it/1400x400" alt="slide">
      </div>

      <div class="item">
        <img src="http://placehold.it/1400x400" alt="slide">
      </div>

      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

You can view it here

Upvotes: 2

Related Questions