search

Wlada / vue-carousel-3d

Vue Carousel 3D - Beautiful, flexible and touch supported 3D Carousel for Vue.js
MIT License
973 stars 202 forks source link

Is it possible to override the style of prev and next buttons #102

Closed zjonez closed 6 years ago

zjonez commented 6 years ago

I am currently overriding the the CSS style for the carousel-3d-controls class. However my changes are not pushing through. I was wondering if there's an easy way to do this.

zjonez commented 6 years ago

Found the problem, the controls are in a different component and the styles are scoped. I will be using the /deep/ selector for this one.

oGabrielArruda commented 4 years ago

Found the problem, the controls are in a different component and the styles are scoped. I will be using the /deep/ selector for this one.

Hey man, did it really work? How did you do it?

zjonez commented 4 years ago

Found the problem, the controls are in a different component and the styles are scoped. I will be using the /deep/ selector for this one.

Hey man, did it really work? How did you do it?

Hi, the controls are in this component here: https://github.com/Wlada/vue-carousel-3d/blob/master/src/Controls.vue and as you can see the styles are scoped. Meaning the styles are meant to be in the component itself.

To override the style scoped, you have to use deep selectors in your Vue Component. Here's a sample https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors. In my case, I used deep selectors on next and prev.

mfissehaye commented 4 years ago

It would be great if we can implement the next and previous buttons as html inside a template slot as:

<template v-slot:next-button>
   <i class="icon icon-arrow-next" />
</template>
<template v-slot:prev-button>
   <i class="icon icon-arrow-prev" />
</template>