Vue-carousel: Cannot access the css of the arrows 😭

[midlantica]

I'm using Nuxt, Carousel works fine but cannot access CSS on arrows. I need the arrows to be inside the frame.

I'm no JS genius, maybe I'm just not doing this right, or do not understand how it works.

I added a "class="druCarousel"' in <carousel> to access css... which works on the img size:
<carousel
        :perPage=1
        :navigationEnabled="true"
        :paginationEnabled="false"
        :autoplay="true"
        :autoplayTimeout="2500"
        :autoplayHoverPause="true"
        :loop="true"
        :navigationClickTargetSize="0"
        class="druCarousel"
      >

.VueCarousel.druCarousel {
    @include shadow;
    margin-bottom: .75em;
    //
    img {
      width: 100%; // <-- This works!
      height: auto; // <-- This works!
    }
  }

// None of the below works. :(
VueCarousel.druCarousel .VueCarousel-navigation {
    //
    .VueCarousel-navigation-button {
      //
      .VueCarousel-navigation-prev {
          transform: translateY(-50%) translateX(50%) !important; // <-- Need this to happen
      }
      .VueCarousel-navigation-next {
          transform: translateY(-50%) translateX(50%) !important; // <-- Need this to happen

      }
    }
  }

P.S. The will not accept these:
:navigationNextLabel=">"
:navigationPrevLabel="<"
Terminal reports:
```

• invalid expression: :navigationNextLabel="˂"
• invalid expression: :navigationPrevLabel="˃"
  ````

Thanks!

[mishushakov]

Try using html in navigationNextLabel and navigationPrevLabel

Example

navigationNextLabel="<button class='rightnav'>Right</button>"
navigationPrevLabel="<button class='leftnav'>Left</button>"

[midlantica]

That helped in changing the the arrows, thanks, but I still cannot target them in CSS. Flummoxed. There must be an answer!?

[bovas85]

if you are using scoped styles, you have to target them without scoped (ideally a global css).
With nuxt I do that in layouts, with Vue I guess in the root component

[midlantica]

Yeap! The answer is to simply remove 'scoped'.

And then I could get the arrows inside my slide image area.

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