I am currently using vue-awesome-swiper and encountering an issue. The swipers on my page have buttons (prev slide, next slide) for navigating through slides. However, when I include two swipers on the same page, the buttons of one swiper end up affecting the other. This means that when I try to swipe to the next slide in the first swiper, the second swiper also moves to the next slide involuntarily. Below is a snippet of my component code:
<template>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class='mobSwip'>
<div class="swiper-container" id="quick-view-slider">
<swiper :options="swiperOption">
<swiper-slide v-for="screen in screens" :key="screen.key"><img v-bind:src="`https://admin.springsapps.com${screen.url}`"/></swiper-slide>
<swiper-slide v-if="!screens"><img src="@/assets/images/quick-view-1.png"/></swiper-slide>
</swiper>
</div>
<!-- <div class="swiper-pagination" slot="pagination"></div> -->
<div class="swiper-button-next"><span class="icon-play"></span></div>
<div class="swiper-button-prev"><span class="icon-play-flip"></span></div>
<!-- <button @click="swipeNext">next</button> -->
</div>
</div>
</div>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
props: {
screens: {
type: Array,
required: false
}
},
data: function () {
return {
swiperOption: {
slidesPerView: 5,
spaceBetween: 30,
centeredSlides: true,
// pagination: {
// el: '.swiper-pagination',
// clickable: true
// },
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
// nextEl: this.$el.querySelector('.swiper-button-next'),
// prevEl: this.$el.querySelector('.swiper-button-prev')
}
},
}
},
components: {
swiper,
swiperSlide
}
}
</script>
<style scoped>
.swiper-slide {
width: 60%;
}
.swiper-slide:nth-child(2n) {
width: 40%;
}
.swiper-slide:nth-child(3n) {
width: 20%;
}
</style>
I've attempted various methods such as using queryselectors, getting button classes by refs, and following the official documentation's methods for swiping, but nothing seems to work. The only way the buttons seem to function properly is when I define them by class in the data object as shown in my code... How can I ensure that my buttons are independent and operate accurately?