如何在 BootstrapVue Carousel 幻灯片上定位按钮和其他元素？

Question

是否可以在 BootstrapVue Carousel 幻灯片上无限制地放置不同的元素（在任何角落，任何位置）？

我尝试通过在内部嵌套更多元素来做到这一点
<b-carousel-slide></b-carousel-slide> 个标签。

但是，看起来所有这些元素都进入了 div.carousel-caption，我无法将它们移到 div 之外。

我想在 carousel-slide 的 top-right 和 bottom-left 角放置按钮，但我经常得到这样的结果：

如您所见，所有元素都集中在标题中 div...

我有三个问题：

如何实现我的目标并将元素移动到轮播幻灯片的不同角？
是否可以在旋转木马幻灯片中自由添加元素，但在标题之外 div？
如何将完整的标题 div 和指示器移动到轮播幻灯片的顶部？

我的代码：

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

和CSS：

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

Answer 1

您可以使用 <b-carousel-silde> 的 img 插槽添加额外的内容，并使用 CSS 将该内容以及指示器和标题移动到顶部：

在 <b-carousel-slide> 中插入一个 <template #img>（img 槽）。
在那个 img 插槽中，插入一个 <b-img> 和 src，您最初为 <b-carousel-slide>.imgSrc.
添加一个<div>和class carousel-extra-content，然后将<b-link>和<b-avatar>移动到其中。

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

设置 .carousel-extra-content 的样式以将该元素放置在 top-right 角；并允许通过使用比箭头控件更高的 z-index 来点击内容。
同时设置 .carousel-indicators 和 .carousel-caption 样式以将它们移动到幻灯片的顶部。设置 top 就足够了，因为他们已经在使用绝对定位了。

<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

如何在 BootstrapVue Carousel 幻灯片上定位按钮和其他元素？

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

css

carousel

twitter-bootstrap

vue.js

bootstrap-vue