How to set itemWidth in Buefy carousel component?
nigelwhite
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.
Ezra Siton
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:
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).
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: How to spread component props inside passed node element?
- Next: How to restart python script inside bash script every x hours?
Related
TOP Ranking
- 1
pump.io port in URL
- 2
grouping by column variables and appending a new variable based on condition
- 3
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 4
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 5
Group boxplot data while keeping their individual X axis labels in ggplot2 in R
- 6
Vector input in shiny R and then use it
- 7
BigQuery - concatenate ignoring NULL
- 8
Can a 32-bit antivirus program protect you from 64-bit threats
- 9
How to remove the extra space from right in a webview?
- 10
How to how increase/decrease compared to adjacent cell
- 11
android.content.Context.getSharedPreferences(java.lang.String, int)' on a null object reference id DBhandler
- 12
Getting 502 Bad Gateway Error While Deploying WordPress On Dockerized Lemp?
- 13
Type 'number' is not assignable to type 'NgIterable<any>' when trying to async observe a datasource
- 14
Check if a number is a perfect square
- 15
FFmpeg resize without upscaling
- 16
How do I display Label text character-by-character?
- 17
How to show an image in a View with ASP.NET MVC 5? (Many suggestions failed so far)
- 18
Json Schema - Conditional Evaluation with RegEx
- 19
PlayOnLinux displays weird looking window on 18.04 for MS Office installation
- 20
JMeter: Why get error when try to save test plan
- 21
Emulator wrong screen resolution in Android Studio 1.3
Comments