vue使用swiper做轮播图

要在Vue中使用Swiper做轮播图，可以按照以下步骤进行操作：

1. 安装Swiper插件

在项目目录下运行以下命令安装Swiper插件：

npm install swiper --save

2. 引入Swiper插件

在需要使用Swiper的组件中，引入Swiper插件：

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

3. 创建Swiper实例

在组件的mounted()函数中，创建Swiper实例：

mounted() {
  new Swiper('.swiper-container', {
    autoplay: {
      delay: 3000,
      disableOnInteraction: false
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    }
  })
}

这里autoplay是自动播放，pagination是分页器，详细配置可以参考Swiper官网。

4. 编写轮播图模板

最后，在模板中编写轮播图代码：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

其中swiper-container是容器，swiper-wrapper是包含轮播图内容的容器，swiper-slide是每一项轮播图内容，swiper-pagination是分页器容器。

这样，一个简单的Swiper轮播图就完成了。