<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>
