customize the nav arrows

[DBereznak]

I was just curious if it was possible to customize the nav arrows. I tried targeting the css selector class and the button with no success. I know I can go into the npm module and update it there, but that is inefficient, because if do a fresh npm install I will lose the change.

[ismail9k]

You can pass your own navigation arrows, whether an SVG, FontIcon or even a normal text. Check the example below:

<carousel>
  ...

  <template #addons>
    <navigation>
      <template #next>
        <span> >> </span>
      </template>
      <template #prev>
        <span> << </span>
      </template>
    </navigation>
  </template>
</carousel>

[DBereznak]

Thanks, that works with the icon, but it still has that purple background

<template #addons>
        <navigation>
          <template #next>
            
          </template>
          <template #prev>
           
          </template>
        </navigation>
      </template>

[ismail9k]

You can overwrite the default CSS style, however, if you don't want the navigations arrows at all, don't add the <navigation> addon

[DBereznak]

I tried overwriting the css, and unless I get into the npm package i can't seem to. I do want the navigation arrows, just not the purple background.

…

On Sat, Feb 27, 2021 at 9:47 AM Abdelrahman Ismail ***@***.***> wrote: You can overwrite the default CSS style, however, if you don't want the navigations arrows at all, don't add the <navigation> addon — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#17 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACDHQIUAYDPBIW2L7METK7DTBEAY5ANCNFSM4XGPNDUQ> .

[ismail9k]

All classes are exposed using the BEM naming convention, so you can easily overwrite then for example:

.carousel__prev,
.carousel__next {
	border: 5px solid white;
	background-color: red;
}

You can also overwrite the carouse primary color CSS variable value to achieve this:

:root {
    --carousel-color-primary: red;
}

Please make sure you are using the latest version, and If this doesn't work with you, could you please provide me we a working example snippet?

[DBereznak]

I got it, I had to put the css for it all the way on the parent component to waterfall down

…

On Sat, Feb 27, 2021 at 1:49 PM Abdelrahman Ismail ***@***.***> wrote: All classes are exposed using the BEM naming convention, so you can easily overwrite then for example: .carousel__prev, .carousel__next { border: 5px solid white; background-color: red; } You can also overwrite the carouse primary color CSS variable value to achieve this: :root { --carousel-color-primary: red; } Please make sure you are using the latest version, and If this doesn't work with you, could you please provide me we a working example snippet? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#17 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACDHQISU4FYEEPVFZASBVGTTBE5DVANCNFSM4XGPNDUQ> .

[ismail9k]

Great!

[ans-human]

I got it, I had to put the css for it all the way on the parent component to waterfall down
…
On Sat, Feb 27, 2021 at 1:49 PM Abdelrahman Ismail @.***> wrote: All classes are exposed using the BEM naming convention, so you can easily overwrite then for example: .carousel__prev, .carousel__next { border: 5px solid white; background-color: red; } You can also overwrite the carouse primary color CSS variable value to achieve this: :root { --carousel-color-primary: red; } Please make sure you are using the latest version, and If this doesn't work with you, could you please provide me we a working example snippet? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#17 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACDHQISU4FYEEPVFZASBVGTTBE5DVANCNFSM4XGPNDUQ .

Can you please specify what do you mean by the parent component. I am having difficulty achieving exactly what you did.

<Carousel :items-to-show="3" :snapAlign="'start'" class="items-start align-top justify-items-start">
  <Slide v-for="plan in plans" :key="plan.title" class="gap-8 mx-4 items-start" :snapAlign="'start'">
    <div class="carousel__item mx-4 gap-4 items-start">
      <Pricingcard :title="plan.title" :price="plan.price" :date="plan.date" :active="plan.active" :expand="expand" :content="plan.content"/>
    </div>
  </Slide>

  <template #addons>
    <Navigation class="h-20 w-20 -mx-6 focus:outline-none" />
  </template>
</Carousel>

So I have plan cards which I want to start with the same top line. I don't seem to be able to achieve this.

[gmenke54]

This thread was super useful for figuring out how to change the color of the arrows so thank you for asking @DBereznak ! I also wanted to note that you have to make sure your style tag is unscoped when you set the color of the arrows.

[ahmadwaluyo]

:root {
    --carousel-color-primary: red;
}

why it didn't work on my project, i tried to override styling to change navigation color but it was still unsuccessfull

[ismail9k]

@ahmadwaluyo Please refer to this file to know which CSS variables are available for the carusel

[ahmadwaluyo]

<template #addons> <navigation v-if="screenWidth > 640"> <template #next> <div class="carousel__next"> <icon name="chevron-right" color="#333" /> </div> </template> <template #prev> <div class="carousel__prev"> <icon name="chevron-left" color="#333" /> </div> </template> </navigation> </template>

i've fixed it by overrided it with new class:

.carousel__prev,
.carousel__next
{
border-radius: 50%;
margin: 0 16px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff !important;
filter: drop-shadow(0px 15px 30px rgba(51, 51, 51, 0.2));
box-shadow: 0px 15px 30px rgba(51, 51, 51, 0.2);
}

then, could you please tell me how to override style in pagination

[ismail9k]

Check this sandbox for example on how to use the carousel CSS Variables

[ahmadwaluyo]

i understand right now, it's because i made my style into scoped so overriding class would not work properly. When i set my style not in scoped mode its work ! alright thank you for your help 👍 Pada tanggal Sab, 26 Mar 2022 pukul 15.55 Abdelrahman Ismail < ***@***.***> menulis:

…

Check this sandbox <https://codesandbox.io/s/vue3-carousel-custom-colors-0wqztz?file=/src/App.vue> for example on how to use the carousel CSS Variables — Reply to this email directly, view it on GitHub <#17 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALMOSRSNTJAQGHYAVBWMDYTVB3GHJANCNFSM4XGPNDUQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[IHAGI-c]

I want to apply +1 to data=0 when I press next and -1 when I press prev. How can I customize it?

[ismail9k]

@IHAGI-c The easiest way is to create your custom navigation and make it do whatever you want. Check this example: https://ismail9k.github.io/vue3-carousel/examples.html#custom-navigation

[IanKoncevich]

So If You want to modify Vue3 carousel navigation to custom view. There is 3 easy steps:

1. Open library file destination something like: "vue3-carousel/dist/carousel.css"

2. Creat css file copy and rename it for example: "vue3-carousel/dist/carousel-custom.css" You can modify it as you need.

3. In Your JS script replace "import "vue3-carousel/dist/carousel.css";" with
   "import "vue3-carousel/dist/carousel-custom.css";" to point it to your new custom css.

Modifying of initial main css file did not gave me any results but new one - worked well!