Buefy轮播组件如何设置itemWidth？

Question

我在 Gridsome 单个文件组件中使用 https://buefy.org/documentation/carousel#carousel-list 中的 Buefy Carousel List。我需要将幻灯片的宽度从默认值 (476.25) 更改为我自己图像的 width (176)。

在 Vue dev 工具中，我可以手动覆盖数据属性 itmeWidth。这显示正确，Vue 开发工具显示计算的道具已更改为 itemStyle: "width: 176px;"

如何将新宽度编码到组件中？我已经通过样式 (.carousel-slide width: 176px)、数据道具 (itemWidth: 176) 和计算道具 (itemStyle: "width: 176px;") 进行了尝试。所有都被忽略并应用默认宽度。

Answer 1

否 API option/support 自定义宽度幻灯片 由 CSS 设置（示例： 在滑动器上 slidesPerView: auto 是此想法的 API 选项 - 参见 swiper demos）。

https://buefy.org/documentation/carousel/#api-view

对于 carousel list 由 Javascript 添加的宽度（内联 CSS）- 示例：

无论如何，!important; 将更改宽度（输出：损坏的布局）。

.carousel-item{
  width: 176px!important;
}

要显示的项目

另一个 idea/option 用于自定义宽度：使用 items-to-show 和小数（例如 3.2）。

Buefy轮播组件如何设置itemWidth？

How to set itemWidth in Buefy carousel component?

vue.js

buefy

gridsome

要显示的项目