Feature Request: allow pagination and navigation elements to be styled

[robbiemu]

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.

[arjanski]

I would also be very interested in styling the navigation buttons, so +1 !

Could you elaborate on the workaround using :navigationStyle? I didn't find the prop in the API. What exactly would you pass if you were to style the color of the navigation buttons for instance? Or did I understand you wrong?

Thank you in advance everyone

[fogil]

These elements are just HTML dom elements with classes attached. If you want to style them do something like this SCSS snippet:

.VueCarousel { .VueCarousel-navigation-button { color: skyblue; } }

It's just CSS. You can even manually position them anywhere you want. Or resize them, or do anything you want with them.

[midlantica]

Newbie... All my styles went bad when I changed from not scoped

I needed to go chang to scoped because I had intended on using the vue-carousel twice within the same page. I have not yet tried to do that yet, since I am still trying to solve this problem (hopefully it will not be difficult).

I needed to get to the Prev < and Next > arrows. I could get at them prior to the change to scoped with: a.VueCarousel-navigation .VueCarousel-navigation-button.VueCarousel-navigation-prev { CSS }

No luck.

I also tried: html > .sectionTwo > .VueCarousel.VueCarousel-navigation.VueCarousel-navigation-button a.VueCarousel-navigation-prev { CSS }

I guess I am not getting at the Nuxt-changed DOM... Help?

[robbiemu]

So, when you use scoped styles, it attaches an attribute to elements in scope and that same attribute the the end tags in each of your rules. This prevents styling of component internals like the carousel here.

I guess a general solution, the one I am using, is to add a (possible second) <Style> tag that is not scoped, and a unique classname or other modifier to your component's outermost element. Your rules then all start with this element in the non-scoped style block.

[midlantica]

Thank you for your help, it partially worked. I added class="druCarousel" as a custom class.

<carousel class="druCarousel" :perPage=1 :navigationEnabled="true" :paginationEnabled="false" :autoplay="false" :autoplayTimeout="2500" :autoplayHoverPause="true" :loop="true" >
    <slide><img src="~assets/img/portfolio/Xxxx.jpg"></slide>
    ....
</carousel>

I could get at the DOM's carousel innards changing the CSS like so: .VueCarousel.druCarousel { CSS }

But I could not access the .VueCarousel-navigation... I cannot touch those bloody arrows, at least not in scoped.

Scratching head...

[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');
      }
    }
  }
}

[midlantica]

Thanks. I got rid of scoped and all is well.

I did it slightly differently. I can finally position those bloody arrows. :D

&.leftnav {
    transform: translateY(0%) translateX(130%);
}
&.rightnav {
    transform: translateY(0%) translateX(-130%);
}

[TheAlexLichter]

It'd be better to use named slots for custom styling of the nav components though :thinking:

[sprlwrksAprilmintacpineda]

<template>
  <!-- whatever -->
<template>
<script>
  // whatever
</script>
<style lang="sass">
/* make sure you remove "scoped"*/
.VueCarousel-pagination /* or something else that you want*/
  background-color: #000;
</style>

[coderpradp]

+1 for the slots. Currently, we can pass the color and sizes with props but it's no use in utility based framework like tailwind. It would be awesome if we could pass the classes.