[Vuejs]-How to custom v-carousel delimiter icon

by

1👍

✅

In CSS do the following;

.v-carousel__controls__item.v-btn.v-btn--icon {
    background-color: #ebece9; /* Background color of non-active ones */
    height: 2px; /* Height you want */
    width: 40px; /* Width you want */
    border-radius: 0; /* Remove default border radius */
}
  
.v-carousel__controls__item.v-btn.v-btn--icon.v-btn--active {
    background-color: #1f1f1f; /* Colour for active one */
}

.v-carousel__controls__item.v-btn.v-btn--icon:hover {
    background-color: black; /* You might also want to customise the hover effect */
}

.v-btn__content .v-icon {
    display: none; /* Removes the default icon */
}

Working demo

👤Bernard Borg

Leave a comment