Возможно ли вынести стрелки swiperjs для vue.js3?

Question

[mrSoma]

в документации все примеры где стрелки по бокам по середине и спозиционированы абсоютно,
В обычном swiper на чистом js можно было просто вставить любые элемеенты где угодно и потом в настройке написать типа так

const swiper = new Swiper('.swiper', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

и тогда элементы с классом '.swiper-button-next'/ '.swiper-button-prev можно было разместить где угодно на странице и они слайдер все равно бы реагировал на них.
Во vue.js же описан только способ с props navigation, но тогда стрелки рендарятся посередине и абсолютом

Вообще хочу добиться такого результата

Answer 1

[RAX7]

<template>
  <swiper
    :navigation="{
      prevEl: prev,
      nextEl: next,
    }"
    :modules="modules"
    class="mySwiper"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
  <div ref="prev" class="swiper-button-prev">prev</div>
  <div ref="next" class="swiper-button-next">next</div>
</template>
<script>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import { Navigation } from 'swiper';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const prev = ref(null);
    const next = ref(null);
    return {
      modules: [Navigation],
      prev,
      next,
    };
  },
};
</script>

Comments

[mrSoma]

Большое спасибо. Теперь понял как это работает

[kirill-petrov]

прикольно! Очень выручил

А для чего прикручено ref prev & next к дивам?

…
        :navigation="{
            prevEl: '.slider-contols__prev',
            nextEl: '.slider-contols__next',
        }"

Не стоит переопределять дефолтные классы? или… Ты просто указал и классы и рефы на дивах