How to add pagination in vue-awesome-swiper plugin?

Question

Vue.js

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>

The project is on laravel + vue, I connect it all locally, but pagination doesn’t work, the buttons just don’t appear, what can I do?

Answer 1

They write that navigation was broken in the latest version, you can roll back to the old one or wait for the new version. Or try the modified connection option https://github.com/surmon-china/vue-awesome-swiper...