Как добавить пагинацию в плагине vue-awesome-swiper?

Question

[sickgang]

Искал слайдер для vue js, нашел vue-awesome-swiper, подключил, все свайпается, но пагинация не добавляется, можно только тянуть мышкой и все
Вот мой компонент vue

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

Проект на laravel + vue, подключаю локально это все, но именно пагинация не работает, просто не появляются кнопочки, что можно сделать?

Answer 1

[its2easyy]

Пишут что в последней версии поломали навигацию, можно откатиться на старую или подождать новую версию. Или попробовать изменённый вариант подключения https://github.com/surmon-china/vue-awesome-swiper...

Comments

[sickgang]

попробовал так сделать, вот такую ошибку выдает
Errors compiling template:

text "module.exports = "\n" outside root element will be ignored.

1 | module.exports = "\n\n \n \n \n \n \n \n \n \n\n";