Vue.js Buefy垂直缩略图转盘？

当我使用

b-carousel

标记时，它工作正常，但缩略图是水平的。如何使它们垂直

代码如下：

导出默认值{
方法：{
getImgUrl（值）{
返回`https://picsum.photos/id/43${value}/1230/500`
}
}
}
.处于活动状态。al img{
滤镜：灰度（0%）；
}
艾尔·伊姆格先生{
滤镜：灰度（100%）；
}

我想要的输出：

注意：此解决方案有一个缺点，即它依赖于

b-carousel

的CSS实现细节，但这对于您的用例来说可能是可以接受的：

您可以使用CSS设置

b-carousel

元素的样式：

• .carousel

  -根容器

• .carousel指示器

  -缩略图容器（一个

  flex

  项目）

• 。指示器项目

  -每个缩略图项目

两列 在这种情况下可能最有帮助，因为我们基本上需要一个2列网格。这是通过应用于根容器并创建主图像列和缩略图列来完成的：

.carousel{
显示：网格；
网格模板列：自动25%；
对齐项目：居中；
}

垂直缩略图 适用于这里。缩略图容器已在使用它，但它使用默认的

行

（水平）。我们可以轻松地将其更改为

列

，使其垂直：

.carousel指示器{
弯曲方向：立柱；
}

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

。指示符项{
右边距：首字母！重要；
}

---

我可以问一下，我是否可以用url名称来代替索引？如果我没有将url放在方法中，并且url是可变的，我如何在模板槽指示器中调用它？我可以问一下，我是否仍然可以调用url名称而不是索引？如果我没有将url放在方法中，并且url是可变的，我如何在模板槽指示器中调用它？