0

I am using Buefy Carousel List from https://buefy.org/documentation/carousel#carousel-list in a Gridsome single file component. I need to change the width of the slides from the default (476.25) to the width of my own images (176).

In Vue dev tools, I can manually override the data prop itmeWidth. This displays correctly and Vue dev tools shows that the computed prop has been changed to itemStyle: "width: 176px;"

How do I code the new width into the component? I have tried via styling (.carousel-slide width: 176px), data props (itemWidth: 176) and computed props (itemStyle: "width: 176px;"). All are ignored and the default width is applied.

Malakiya sanjay
  • 208
  • 2
  • 12
nigelwhite
  • 15
  • 7

1 Answers1

0

No API option/support for custom width slide set by CSS (Example: On swiper slidesPerView: auto is API option for this idea - see swiper demos).

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

For carousel list the width added by Javascript (Inline CSS) - Example:

enter image description here

Anyway, !important; will change the width (Output: broken layout).

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

items-to-show

One more idea/option for custom width: Use items-to-show and decimal (3.2 for example).

enter image description here

Ezra Siton
  • 6,887
  • 2
  • 25
  • 37