Closed DBereznak closed 3 years ago
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>
Thanks, that works with the icon, but it still has that purple background
<template #addons>
<navigation>
<template #next>
</template>
<template #prev>
</template>
</navigation>
</template>
You can overwrite the default CSS style, however, if you don't want the navigations arrows at all, don't add the <navigation>
addon
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 notifications@github.com wrote:
You can overwrite the default CSS style, however, if you don't want the navigations arrows at all, don't add the
addon — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ismail9k/vue3-carousel/issues/17#issuecomment-787083268, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACDHQIUAYDPBIW2L7METK7DTBEAY5ANCNFSM4XGPNDUQ .
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?
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 notifications@github.com wrote:
All classes are exposed using the BEM naming convention, so you can easily overwrite then for example:
.carouselprev, .carouselnext { 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 https://github.com/ismail9k/vue3-carousel/issues/17#issuecomment-787118185, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACDHQISU4FYEEPVFZASBVGTTBE5DVANCNFSM4XGPNDUQ .
Great!
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: .carouselprev, .carouselnext { 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.
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.
: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
@ahmadwaluyo Please refer to this file to know which CSS variables are available for the carusel
`<template #addons>
`
i've fixed it by overrided it with new class:
.carouselprev, .carouselnext { 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
Check this sandbox for example on how to use the carousel CSS Variables
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 https://github.com/ismail9k/vue3-carousel/issues/17#issuecomment-1079643463, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALMOSRSNTJAQGHYAVBWMDYTVB3GHJANCNFSM4XGPNDUQ . You are receiving this because you were mentioned.Message ID: @.***>
I want to apply +1 to data=0 when I press next and -1 when I press prev. How can I customize it?
@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
So If You want to modify Vue3 carousel navigation to custom view. There is 3 easy steps:
Open library file destination something like: "vue3-carousel/dist/carousel.css"
Creat css file copy and rename it for example: "vue3-carousel/dist/carousel-custom.css" You can modify it as you need.
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!
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.