Как заменить стрелки слайдера на свои vue3 swiper@8.4.4?

Question

[vadimjkee]

Проблем с добавлением слайдера (swiper@8.4.4) нет, но существует проблема замены стрелок на свои (своей картинкой). Нигде в интернете такой информации не нашел

Answer 1

[Sozdavan]

Чтобы заменить стрелки в Vue3 Swiper@8.4.4, вам нужно будет использовать функциональность слота, предоставляемую библиотекой. Во-первых, вам нужно будет создать пользовательский компонент, который включает нужные вам изображения стрелок. Затем вам нужно будет использовать слоты «предыдущая кнопка» и «следующая кнопка» в компоненте swiper, чтобы заменить стрелки по умолчанию вашим пользовательским компонентом. Вот пример того, как это сделать:

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(item, index) in items" :key="index">
      {{ item }}
    </swiper-slide>
    <template v-slot:prev-button>
      <CustomArrow type="prev"/>
    </template>
    <template v-slot:next-button>
      <CustomArrow type="next"/>
    </template>
  </swiper>
</template>

<script>
import Swiper from 'swiper';
import CustomArrow from './CustomArrow.vue';

export default {
  components: {
    Swiper,
    CustomArrow
  },
  data() {
    return {
      swiperOptions: {
        // swiper options here
      },
      items: [
        // items here
      ]
    }
  }
}
</script>

Здесь CustomArrow — это пользовательский компонент Vue, который имеет два реквизита, тип и изображение, которые используются для отображения следующего и предыдущего изображений стрелок соответственно

Comments

[vadimjkee]

Спасибо большое!

[vadimjkee]

Sozdavan, есть какая-то команда для создания компоненета 'CustomArrow '?
Или как он должен выглядеть внутри?