Answer the question
In order to leave comments, you need to log in
How to add pagination in vue-awesome-swiper plugin?
I was looking for a slider for vue js, found vue-awesome-swiper, connected, everything swipes, but pagination is not added, you can only drag with the mouse and that 's it
. Here is my vue component
<template>
<div v-swiper:mySwiper="swiperOptions">
<div class="swiper-wrapper">
<div class="swiper-slide" :key="banner" v-for="banner in banners">
<img :src="banner">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</template>
<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
data () {
return {
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
swiperOptions: {
pagination: {
el: '.swiper-pagination',
type: 'bullets'
},
// ...
}
}
},
mounted() {
console.log('Current Swiper instance object', this.mySwiper)
this.mySwiper.slideTo(3, 1000, false)
},
components: {
Swiper,
SwiperSlide
},
directives: {
swiper: directive
}
}
</script>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question