Custom Navigation Buttons

[rishabhgoel9797]

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

[digi-com]

Try something like this?

navigation-next-label=""
navigation-prev-label=""

.VueCarousel-navigation-next::after {
  content: url('/images/banner-right.svg');
}
.VueCarousel-navigation-prev::after {
  content: url('/images/banner-left.svg');
}

[phuclh]

@digi-com Is that possible to make my own custom button? Something like that:

[xiashaxs]

In template,

<carousel
    :navigation-enabled="true"
    :navigation-next-label="nextLabel"
    :navigation-prev-label="prevLabel"
>
</carousel>

In script,

data () {
    return {
        nextLabel: "<img src='/assets/images/chevron-right.png' />",
        prevLabel: "<img src='/assets/images/chevron-left.png' />"
    }
}

[nabilfreeman]

Thanks so much @shasarah !!!

[panfanky]

@shasarah this sounds like an answew, but gives me " Property or method "nextLabel" is not defined on the instance but referenced during render" when having this in .vue file:

<template>
  <div>
    <slot/>
  </div>
</template>
<script>

import Vue from 'vue';
import Carousel from 'vue-carousel';
Vue.use(Carousel);
import Slide from 'vue-carousel';
Vue.use(Slide);

export default {
  components: {
    'carousel': Carousel,
    'slide': Slide
  },
  methods: {
  },
  props: {
  },
  data() {
    return {
    nextLabel: "<i class='ico--chevron-right'></i>",
    prevLabel: "<i class='ico--chevron-left'></i>"
      }
  }
}

</script>

and this in html file:

<carousel :per-page=1 :navigation-enabled="true" :navigation-prev-label="prevLabel"  :navigation-next-label="nextLabel" class="article-card-list pt-12 pb-8">
              <slide>lorem</slide>
              <slide>ipsum</slide>
</carousel>

Thanks so much anyone who knows!

[GileadGaf]

try to use computed instead of data