Use vue-awe-swiper for a pit ah!! !

Cannot use toggle buttons and pagers

Now swiper has been upgraded to version 6, the use of componentized, and the previous version is not universal, resulting in the button and pager can not be used!! You won’t get an error

Solution 1

Back swiper to 5.0.0 in package.json, then NPM update

Solution 2

Swiper.use under Navigation, Pagination, Autoplay and other components

<template>
  <div class="recommend-content">
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"> <i class="el-icon-caret-left"></i> </div>
      <div class="swiper-button-next" slot="button-next"> <i class="el-icon-caret-right"></i></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
import Swiper2, {Navigation, Pagination, Autoplay} from 'swiper';
Swiper2.use([Navigation, Pagination, Autoplay]);

export default {
  name: "Recommend",
  components:{
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 1,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  methods:{
    openButton(open){
      console.info('dsdsds', open);
    },
    onSwiper(swiper) {
      console.log(swiper)
    },
    onSlideChange() {
      console.log('slide change')
    },
  },
  directives: {
    swiper: directive
  }
}
</script>

Copy the code