Как установить itemWidth в компоненте карусели Buefy?

Question

Я использую Buefy Carousel List из https://buefy.org/documentation/carousel#carousel-list в Gridsome компоненте одного файла. Мне нужно изменить ширину слайдов со значения по умолчанию (476,25) до width моих собственных изображений (176).

В Vue dev инструментах я могу вручную переопределить данные prop itmeWidth , Это отображается правильно, а инструменты Vue dev показывают, что вычисленный реквизит был изменен на itemStyle: "width: 176px;"

Как мне кодировать новую ширину в компоненте? Я пробовал через стиль (.carousel-slide width: 176px), реквизиты данных (itemWidth: 176) и вычисленные реквизиты (itemStyle: "width: 176px;"). Все игнорируются и применяется ширина по умолчанию.

Answer 1

Нет опции API / поддержка пользовательский слайд ширины устанавливается CSS ( Пример: На swiper slidesPerView: auto это опция API для этой идеи - см. демонстрации swiper ).

https://buefy.org/documentation/carousel/#api -вид

Для carousel list ширина , добавленная Javascript (Inline CSS) - Пример:

В любом случае, !important; изменит ширину (Вывод: ломаная схема).

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

элементов для показа

Еще одна идея / опция для пользовательской ширины: используйте items-to-show и десятичную (например, 3.2).