vue.js - 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

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

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

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

两列

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

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

垂直缩略图

Flexbox在这里适用。缩略图容器已经在使用它，但它使用默认值flex-flow( rowhorizo​​ntal)。我们可以很容易地改变它以column使其垂直：

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

缩略图边距

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

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