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 could be most helpful in this case, as we essentially want a 2-column grid. This is done by applying display: grid to the root container, and grid-template-columns: auto 25% 创建主图列和缩略图列：

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

垂直缩略图

Flexbox applies here. The thumbnail container is already using it, but it uses the default flex-flow of row（水平）。我们可以轻松地将其更改为 column 以使其垂直：

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

缩略图边距

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

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

Buefy 垂直缩略图轮播？

Buefy vertical thumbnails carousel?

vue.js

vuejs2

buefy

vuejs3

两列

垂直缩略图

缩略图边距