欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue使用swiper插件

程序员文章站 2022-07-10 21:21:49
...

最近在用VUE写一个单页项目,涉及到的轮播组件比较多。就想到了在项目中引入swiper进行开发,使用方法记录如下:

1、项目中安装swiper:

npm install aaa@qq.com --save-dev

2、组件中引入(或者在main.js中全局引入都可以)

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

3、实例中使用

export default {
  data () {
    return {
      swiper: null
    }
  },
  mounted () {
    this.swiper= new Swiper('.swiper-container', {
      autoplay: 3000,
      speed: 1000,
      autoplayDisableOnInteraction: false,
      loop: true,
      centeredSlides: true,
      slidesPerView: 2,
      pagination: '.swiper-pagination',
      paginationClickable: true,
      prevButton: '.swiper-button-prev',
      nextButton: '.swiper-button-next'
    })
  }
}

最终实现效果:

vue使用swiper插件