How to customize vuetify carousel arrows?

Question

Hello i have the following template in my application:

        <v-carousel cycle height="300" class="carousel" hide-delimiters>
          <template v-slot:prev="{ on, attrs }">
            <v-btn fab :color="theme.highlightColor" v-bind="attrs" v-on="on"
              ><v-icon>mdi-arrow-left</v-icon></v-btn
            >
          </template>
          <template v-slot:next="{ on, attrs }">
            <v-btn fab :color="theme.highlightColor" v-bind="attrs" v-on="on"
              ><v-icon>mdi-arrow-right</v-icon></v-btn
            >
          </template>
          <v-carousel-item
            v-for="i in 4"
            :key="i"
            :src="photo"
          ></v-carousel-item>
        </v-carousel>

I wanted to customize arrows responsible for changing the slide. For this purpose, according to vuetify documentation i've used prev, and next slot. The problem is my code has no influence on the look of mentioned arrows. Also no errors are logged to the console. What am i doing wrong? How to customize carousel arrows?

Answer 1

As I imagine that the solutions proposed at the beginning in the doc are not worth it delimiter-icon="mdi-icon".

Because this only allows you to change the background icon image and has an extra difficulty to change it in the moments that are active.

I can suggest something simple and very efficient for this case

1. clean the limiter icon on the carrousel delimiter-icon=""

2. assign your carousel a css class <v-carousel class="cssClass".....

3. include in the corresponding class the css classes to change

     .cssClass {   .v-btn {
           color: transparent !important;
           border: 1px solid red !important;
           background-color: transparent !important;
       }
   
       .v-btn--active {
           color: red !important;
           border: 1px solid red !important;
           background-color: red !important;
       }
   }
   

it would look something like this

<v-carousel class="cssClass"  
                    v-model="model"
                    cycle
                    delimiter-icon="">
        ....
      </v-carousel>

Once this is done, the result of the carrousel will now be the following

I hope I have helped, regards.

Answer 2

This is working exemple. Something more is needed ???

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      colors: [
        'indigo',
        'warning',
        'pink darken-2',
        'red lighten-1',
        'deep-purple accent-4',
      ],
      slides: [
        'First',
        'Second',
        'Third',
        'Fourth',
        'Fifth',
      ],
    }
  },
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  

<div id="app">
  <v-app id="inspire">
    <v-carousel
      cycle
      height="400"
      hide-delimiter-background
      show-arrows-on-hover
    >
      <template v-slot:prev="{ on, attrs }">
        <v-btn
          color="success"
          v-bind="attrs"
          v-on="on"
        >PREV @Bulchsu</v-btn>
      </template>
      <template v-slot:next="{ on, attrs }">
        <v-btn
          color="info"
          v-bind="attrs"
          v-on="on"
        >NEXT @Bulchsu</v-btn>
      </template>
      <v-carousel-item
        v-for="(slide, i) in slides"
        :key="i"
      >
        <v-sheet
          :color="colors[i]"
          height="100%"
        >
          <v-row
            class="fill-height"
            align="center"
            justify="center"
          >
            <div class="display-3">
              {{ slide }} Slide
            </div>
          </v-row>
        </v-sheet>
      </v-carousel-item>
    </v-carousel>
  </v-app>
</div>