vue使用swiper插件

最新推荐文章于 2025-07-03 11:42:32 发布

原创最新推荐文章于 2025-07-03 11:42:32 发布 · 3.4k 阅读

4 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

65 篇文章

订阅专栏

本文介绍如何在VUE项目中引入并使用Swiper轮播组件，包括安装Swiper、在组件中引入及配置参数等步骤，帮助开发者快速实现页面轮播效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1、项目中安装swiper：

npm install swiper@3.4.1 --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'
    })
  }
}

最终实现效果：