Vue-awesome-swiper: Is there a way of hiding the left/right arrows if not required?

[Ajauregui69]

I want to know if there's any example, of how do i can hide the arrows if they aren´t required

[surmon-china]

arrows: https://github.com/surmon-china/vue-awesome-swiper/blob/master/examples/01-default.vue
no arrows: https://github.com/surmon-china/vue-awesome-swiper/blob/master/examples/02-navigation.vue

[Ajauregui69]

I know that, what a meant is how to hide the left arrow if there's no more left slide, or how to hide the right arrow if there's no more right slide.

[surmon-china]

You can try use the slides.length and v-if to control the arrows.

[gbdematos]

.swiper-button-next, .swiper-button-prev {
    transition: opacity .5s;
}

.swiper-button-disabled {
     opacity: 0 !important;
}

[bovas85]

You have a class when there are no more slides and you are not looping the slider. Check that and style it accordingly as above

[sebastianjung]

I think this property will help:

watchOverflow: true,

also works with custom buttons defined in the options

 navigation: {
     nextEl: '.arrow--next',
     prevEl: '.arrow--prev',
}

[MUMUKSHMEGHWAL]

if there is button on carousel item (lets say image) which takes you to different route then also before moving to next route it shows arrow button and then move to next route.

class swiper-button-disabled is removed before route change and then route changes so button are visible if hidden using css like below one.

.swiper-button-disabled {
opacity: 0 !important;
}

[gdesplin]

From the previous comments I was able to piece it all together, but I wanted to put it all together in one place and some things I learned.
First step is to add the watchOverflow: true option to your slider initialization (if you have arrows you already have the navigation option added).
Now when a slider is at the end or beginning (or both), it will add the .swiper-button-disabled class to the arrow(s).
You could simply do something like .swiper-button-disabled { display: none; }, however this will cause shifting in elements as it removes it completely.
This is why many suggested to do .swiper-button-disabled { opacity: 0; } as it will leave all the other elements in place, but my setup resulted it the cursor still changing to pointer when it hovered over it (and even allowing me to click it, which flashed it on screen) so I ended up with .swiper-button-disabled { opacity: 0; cursor: default; }
You probably will need to use !important in some cases on these styles.