Vue carousel – setting icons as navigation labels

Total
1
Shares

I am using this vue carousel package, and I am trying to set the icons as navigation buttons, like this:

<carousel
  :perPage="1"
  :navigationEnabled="true"
  :navigationNextLabel="'<i class="material-icons">keyboard_arrow_right</i>'"
  :navigationPrevLabel="'<i class="material-icons">keyboard_arrow_left</i>'"
>
  <slide v-for="testimonial of testimonials" :key="testimonial.id">
    <img v-if="testimonial.image" :src="testimonial.image.data.path" class="is-96x96">
    <h4>{{ testimonial.title }}</h4>
    <p>{{ testimonial.excerpt }}</p>
  </slide>
</carousel>

But, for some reason, it is not working, I get this as the output in the html:

enter image description here


Solution

Here the props are not dynamic so the code should be

<carousel
  perPage="1"
  :navigationEnabled="true"
  navigationNextLabel="<i class='material-icons'>keyboard_arrow_right</i>"
  navigationPrevLabel="<i class='material-icons'>keyboard_arrow_left</i>"
>
<slide v-for="testimonial of testimonials" :key="testimonial.id">
  <img v-if="testimonial.image" :src="testimonial.image.data.path" class="is-96x96">
  <h4>{{ testimonial.title }}</h4>
  <p>{{ testimonial.excerpt }}</p>
</slide>
</carousel>
Leave a Reply

Your email address will not be published. Required fields are marked *