Buefy垂直缩略图轮播？

Question

当我使用b-carousel 标签时，它可以工作，但缩略图是水平的。如何使它们垂直？

这是代码：

<template>
    <b-carousel :indicator-inside="false">
        <b-carousel-item v-for="(item, i) in 6" :key="i">
            <span class="image">
              <img :src="getImgUrl(i)">
            </span>
        </b-carousel-item>
        <template slot="indicators" slot-scope="props">
            <span class="al image">
                <img :src="getImgUrl(props.i)" :title="props.i">
            </span>
        </template>
    </b-carousel>
</template>

<script>
export default {
    methods: {
      getImgUrl(value) {
          return `https://picsum.photos/id/43${value}/1230/500`
      }
    }
}
</script>

<style>
.is-active .al img {
    filter: grayscale(0%);
}
.al img {
    filter: grayscale(100%);
}
</style>

我想要的输出：

Answer 1

注意：此解决方案的缺点在于它依赖于 b-carousel 的 CSS 实现细节，但这对于您的用例来说可能是可以接受的：

您可以使用 CSS 来设置 b-carousel 元素的样式：

• .carousel - 根容器
• .carousel-indicator - 缩略图容器（flex 项）
• .indicator-item - 每个缩略图项

两列

Grid Layout 在这种情况下可能最有帮助，因为我们本质上想要一个 2 列网格。这是通过将display: grid 应用到根容器并grid-template-columns: auto 25% 来创建主图像列和缩略图列来完成的：

.carousel {
  display: grid;
  grid-template-columns: auto 25%;
  align-items: center;
}

垂直缩略图

Flexbox 适用于此。缩略图容器已经在使用它，但它使用默认的 flex-flow 或 row（水平）。我们可以轻松地将其更改为 column 以使其垂直：

.carousel-indicator {
  flex-direction: column;
}

缩略图边距

缩略图在元素之间有一个margin-right，旨在提供水平图像之间的视觉空间。由于我们将其切换为垂直布局，因此我们可以删除边距：

.indicator-item {
  margin-right: initial !important;
}