Feature Request: allow pagination and navigation elements to be styled

right now from the parent component, you can style the outer .VueCarousel-navigation and .VueCarousel-pagination, but not the elements:

• .VueCarousel-navigation-button
• .VueCarousel-dot

If necessary we can pass in a style like:<carousel :navigationStyle="styleObject"..., but an even better one would be to ensure the inner elements are exposed to styling from the scope of the parent component. I think a careful use of slots in the outer components might resolve this issue.

[manniL]

It’d be better to use named slots for custom styling of the nav components though 🤔

[bovas85]

You can set the content of the arrow to empty as a custom label, then in a global style (not scoped) do

.VueCarousel-navigation-button {
  &.VueCarousel-navigation-prev {
    &:before {
      content: url('/static/images/arrowleft_normal.svg');
      position: absolute;
      top: 0;
      right: 0;
      width: 54px;
      height: 54px;
    }
    &:hover {
      &:before {
        content: url('/static/images/arrowleft_hover.svg');
      }
    }
  }
  &.VueCarousel-navigation-next {
    &:before {
      content: url('/static/images/arrowright_normal.svg');
      position: absolute;
      top: 0;
      right: 0;
      width: 54px;
      height: 54px;
    }
    &:hover {
      &:before {
        content: url('/static/images/arrowright_hover.svg');
      }
    }
  }
}