Search code examples
csstwitter-bootstrapvue.jscarouselbootstrap-vue

How to position buttons and other elements over BootstrapVue Carousel slide?

Is it possible to position different elements on the BootstrapVue Carousel slide without any limitations (in any corner, any position)?

I have tried to do that by nesting more elements inside
<b-carousel-slide></b-carousel-slide> tags.

However, it looks like all those elements get inside the div.carousel-caption and I can't move them outside that div.

I would like to put buttons in the top-right and bottom-left corner of carousel-slide, but I constantly get results like this:

enter image description here

As you can see, all elements are concentrated inside the caption div...

I have three questions:

  1. How to achieve my goal and move elements across different corners of the carousel slide?
  2. Is it possible to add elements freely to the carousel slide, but outside of the caption div?
  3. How to move the complete caption div and indicators to the top of the carousel slide?

My code:

 <b-carousel
            id="story-carousel"
            controls
            indicators
            :interval = "3000"
        >
            <b-carousel-slide 
                text="asdasdasdsa"
                img-src="https://picsum.photos/1024/480/?image=10">

                <b-link>
                    LINK
                </b-link>

                <b-avatar size="md" variant="primary" icon="bookmark-heart" class="ml-2 highlight-button" button
                </b-avatar>
            </b-carousel-slide>
 </b-carousel>

And CSS:

.highlight-button{
        position: absolute;
        top: 0;
        right: 0;
    }
Solution

  • You could use the img slot of <b-carousel-silde> to add the extra content, and use CSS to move that content plus the indicators and caption to the top:

    1. Within <b-carousel-slide>, insert a <template #img> (the img slot).

    2. Within that img slot, insert a <b-img> with the src that you originally had for <b-carousel-slide>.imgSrc.

    3. Add a <div> with class carousel-extra-content, and move the <b-link> and <b-avatar> into it.

    <template>
  <b-carousel>
    <b-carousel-slide text="asdasdasdsa">
      <template #img> 1️⃣
        <b-img
          fluid-grow
          src="https://picsum.photos/1024/480/?image=10"
          alt="Random image"
        ></b-img> 2️⃣

        <div class="carousel-extra-content"> 3️⃣
          <b-link> LINK </b-link>

          <b-avatar
            size="md"
            variant="primary"
            icon="bookmark-heart"
            class="ml-2 highlight-button"
            button
          >
          </b-avatar>
        </div>
      </template>
    </b-carousel-slide>
  </b-carousel>
</template>

    1. Style the .carousel-extra-content to place that element in the top-right corner; and to allow clicks on the content by using a higher z-index than the arrow controls.

    2. Also style .carousel-indicators and .carousel-caption to move them to the top of the slide. Setting top is enough because they're already using absolute positioning.

    <style>
// 4️⃣
.carousel-extra-content {
  position: absolute;
  right: 5em;
  top: 1em;
  z-index: 20; /* overlap arrow controls to allow clicks */
}
// 5️⃣
.carousel-indicators {
  top: 1em;
}
.carousel-caption {
  top: 1.5em;
}
</style>

    demo