Vue-carousel: Feature request: Custom navigation buttons

[FrancescoSaverioZuppichini]

How can I change the prev/next buttons with a custom ones?

[toddlawton]

Hi @FrancescoSaverioZuppichini thanks for your question. Until now the navigation feature has been quite incomplete. At the moment I'm working on building a proper version and having it customizable. Will update soon!

[FrancescoSaverioZuppichini]

Hi @toddlawton, first of all, I want to say "thank you" for your work. I've tried a couple of carousels before and yours is the best one. I'm looking forward to contribute, if I will have the time.

Another "bug" are the state of the default buttons, 'prev' and 'next'. If I click on the 'prev' i go 'next'. In other words, if a click on 'prev' the carousel is scrolled left to right, it should be the other way around.

[fabien-lg]

I confirm the bug @FrancescoSaverioZuppichini mentions.

[toddlawton]

Navigation has been improved in in 0.6.1! 🍰

New options can be found in the API docs, and an example added to the Examples page.
If you need to dive deeper into customizing the CSS, you can modify the following classes in your parent component:

.VueCarousel-navigation, .VueCarousel-navigation-button, .VueCarousel-navigation-prev, .VueCarousel-navigation-next

Cheers!

[FrancescoSaverioZuppichini]

Cool! Is it possible to have some kind of callback/notification when the carousel cannot not scroll anymore?

I want to implement lazy loading.

[toddlawton]

You could set a ref on your carousel like this:

<carousel ref="my-carousel"></carousel>

and test against:

this.$refs['my-carousel'].canAdvanceForward
this.$refs['my-carousel'].canAdvanceBackward

As far as callbacks & notifications are concerned, I'll have to think a little bit about how that upward data flow could work.

[ashwinkshenoy]

I have done custom arrows like this

:navigationPrevLabel='(back_tick)<img src="/public/images/icons/arrow-left1.png" class="slider-prev">(back_tick)'

:navigationNextLabel='(back_tick)<img src="/public/images/icons/arrow-right1.png" class="slider-next">(back_tick)'

Note
( replace back_tick with `` duh! )
and then style it in css!

( Optional )
Incase if we want custom next and prev button placed somewhere below the slider and to target the slider, I have written the following

SlideCarousel(value) {
    const carousel = this.$refs['productDetails'][0];
    const currentPage = carousel.currentPage;
    const pageCount = carousel.pageCount;
    if (value == 'prev') {
        currentPage != 0 ? carousel.goToPage(currentPage - 1) : carousel.goToPage(pageCount - 1);
    } else {
        currentPage < pageCount - 1 ? carousel.goToPage(currentPage + 1) : carousel.goToPage(0);
    }
},

and the clicks like this
@click="SlideCarousel('prev')"
@click="SlideCarousel('next')"

and add ref="productDetails" attr to <carousel> tag.

Hope this helps!

[elvisdt17]

@ashwinkshenoy could you please elaborate more on how you did the custom arrows?
I can't get it to work.

[rukshandangalla]

Thanks a lot @ashwinkshenoy.
I just figured out even you can use font-awesome icons like this:

:navigationNextLabel='(back_tick)<i class="fa fa-chevron-right fa-3x" aria-hidden="true"></i>(back_tick)'
:navigationPrevLabel='(back_tick)<i class="fa fa-chevron-left fa-3x" aria-hidden="true"></i>(back_tick)'

[f3r]

For me the example above gave me a linter error: 'v-bind' directives require an attribute value vue/valid-v-bind', this is an alternative that worked for me.

<template>
  <carousel :navigation-next-label="navigationNext" :navigation-prev-label="navigationPrev">
</template>

<script>
export default {
  computed: {
    navigationNext: function() { return `<i class="fas fa-chevron-right"></i>` },
    navigationPrev: function() { return `<i class="fas fa-chevron-left"></i>` },
 ...

Thanks guys!

[rishabhgoel9797]

i am not able to use navigation-prev-label='<img src="~/assets/images/banner-left.svg">'

[TankGirl1307]

@rishabhgoel9797 I was able to get it to work by doing this:

<template>
  <carousel :navigation-next-label="navigationNext" :navigation-prev-label="navigationPrev">
</template>
<script>
import ChevronRight from '../../../assets/images/chevron-right.svg';
import ChevronLeft from '../../../assets/images/chevron-left.svg';

export default {
computed: {
navigationNext() {
      const chevronRight = ChevronRight;
      return `<img src="${chevronRight}"/>`;
    },
    navigationPrev() {
      const chevronLeft = ChevronLeft;
      return `<img src="${chevronLeft}"/>`;
    },
}
}
</script>

You will need to probably add styles after that.

[jamesclebio]

I think this will make the code more scalable, because I can use the same code for multiple instances on the same page:

carouselNav($event, direction) {
    const ref = $event.target.closest('[data-ref]').dataset.ref;
    const carousel = this.$refs[ref];

    carousel.advancePage(direction);
}

Add ref and data-ref attributes to carousel: <carousel ref="carousel" data-ref="carousel">

Previous: @click="carouselNav($event, 'backward')"

Next: @click="carouselNav($event, 'forward')"

Et voilà! ;D

_Note:_ for next, the parameters are optional - just @click="carouselNav" works!

Hope this helps!