vue中使用swiper插件

工作中日常笔记，vue中使用swiper插件，在pc端和h5端也是常用的插件，记录下来以便下次查看，避免踩坑。

使用版本

"swiper": "^6.3.5",
"vue-awesome-swiper": "^3.1.3"

安装

cnpm install swiper vue-awesome-swiper --save

引入

main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

使用

在组件中应用，根据具体情况自行配置，具体参考swiper官方文档

    Slide 1
    Slide 2
    Slide 3
    Slide 4
    Slide 5
    

  

swiperOptions: {
  slidesPerView: 4,//显示个数
  direction: 'vertical',
   pagination: {
      el: '.swiper-pagination'
   },
}

computed: {
   swiper() {
      return this.$refs.mySwiper.swiper
   }
},
 mounted() {
    this.swiper.slideTo(3, 1000, false)
 }

实现效果

日常记录一篇笔记，一个工具推荐，虽然浏览量很少，但能够记录下来，就是一种收获。