@vadimjkee

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

Проблем с добавлением слайдера (swiper@8.4.4) нет, но существует проблема замены стрелок на свои (своей картинкой). Нигде в интернете такой информации не нашел
  • Вопрос задан
  • 158 просмотров
Решения вопроса 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, который имеет два реквизита, тип и изображение, которые используются для отображения следующего и предыдущего изображений стрелок соответственно
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы