S
S
sickgang2020-08-05 11:50:11
Vue.js
sickgang, 2020-08-05 11:50:11

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>


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

In order to leave comments, you need to log in

1 answer(s)
I
its2easyy, 2020-08-05
@its2easyy

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question