Как я могу использовать изображения в качестве меток навигации для Vue карусели в Vue (Nuxt)? - PullRequest
Новая
       47

Как я могу использовать изображения в качестве меток навигации для Vue карусели в Vue (Nuxt)?

0 голосов
/ 23 апреля 2020

Я использую Vue Карусель (https://github.com/SSENSE/vue-carousel). Я хотел бы использовать navigationNextLabel и navigationPrevLabel в качестве изображений. Это означает, что у меня есть 2 изображения, а именно previous_arrow.png и next_arrow.png, которые я хочу щелкнуть, чтобы скользить по этой карусели.

Но я не могу понять, как я могу встраивать изображения в :navigationNextLabel и :navigationPrevLabel. Вот что у меня есть: 

<template>
<carousel 
  :per-page="1" 
  :mouse-drag="true" 
  :navigation-enabled="true"
  :navigation-next-label="<div><img src="../assets/next_arrow.png" class="w-12 h-12" /></div>"
  :navigation-previous-label="<div><img src="../assets/previous_arrow.png" class="w-12 h-12"/></div>"
>

<slide> Slide content 1 </slide>
<slide> Slide content 2 </slide>
<slide> Slide content 3 </slide>

</carousel>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class Gallery extends Vue {
  @Prop() 'navigationEnabled'!: string;
  @Prop() 'navigationNextLabel'!: string;
  @Prop() 'navigationPreviousLabel'!: string;
}
</script>

Я получаю ошибку: 'v-bind' directives require an attribute value.

Буду признателен за некоторую помощь. Спасибо!

1 Ответ

1 голос
/ 24 апреля 2020

Можно использовать CSS вместо метки html. Конечно, не забудьте скрыть кнопку по умолчанию html. 

.VueCarousel-navigation-button::before {
   content: "";
   position: absolute;
   top: 8px;
   height: 25px;
   width: 25px;
}

.VueCarousel-navigation-next::before {
   background: url('../assets/previous_arrow.png');
   right: 6px;
}

.VueCarousel-navigation-prev::before {
   background: url('../assets/previous_arrow.png');
   left: 6px;
}
...