Vue-carousel: Question: Can styles be customized?
Thanks for the plugin!
Where can we change the CSS-Styles? I tried to set custom styles, but they doesn't work.
blackforestcode
All 4 comments
Hi @w3code,
It should be possible to add your own styles to the carousel by using Vue's built in functionality.
One option would be to modify the .carousel, or .slide classes in your parent component. Another option could be to add a custom class to your carousel using:
<template>
<carousel class="my-custom-class" ... >
</template>
<style>
.my-custom-class {
...
}
</style>
Also note there a few styling options that are customizable by props, see the API Guide for those.
Hopefully this is enough to help, I'll close the ticket and feel free to re-open if you have a feature request.
Cheers!
toddlawton
on 1 Feb 2017
Thanks! I will try it out. 馃憤
blackforestcode
on 1 Feb 2017
How can i override the css properties for this class .VueCarousel-navigation-prev as i want its left: 35px;
AnkitaMagdum
on 29 Aug 2019
Hi @w3code,
It should be possible to add your own styles to the carousel by using Vue's built in functionality.
One option would be to modify the .carousel, or .slide classes in your parent component. Another option could be to add a custom class to your carousel using:<template> <carousel class="my-custom-class" ... > </template> <style> .my-custom-class { ... } </style>Also note there a few styling options that are customizable by props, see the API Guide for those.
Hopefully this is enough to help, I'll close the ticket and feel free to re-open if you have a feature request.
Cheers!
Hi,
I am trying to customize the appearance of the navigation dots but it does not seem to work. Just to clarify, i am using TailwindCSS and dark mode, where you set 2 different colors to use when switching from light to dark theme. This way the paginationColor and paginationActiveColor will not be of much help in my case.
Also by targeting the VueCarousel-dot and VueCarousel-dot--active nothing happens.
I am using NUXT (Vue) and i write all my CSS in the
Most helpful comment
Hi @w3code,
It should be possible to add your own styles to the carousel by using Vue's built in functionality.
One option would be to modify the .carousel, or .slide classes in your parent component. Another option could be to add a custom class to your carousel using:
Also note there a few styling options that are customizable by props, see the API Guide for those.
Hopefully this is enough to help, I'll close the ticket and feel free to re-open if you have a feature request.
Cheers!