在Vue中使用Swiper

github主页：https://github.com/nolimits4web/swiper

swiper中文网：https://www.swiper.com.cn/

Swiper常用于移动端网站的内容触摸滑动。

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

使用步骤：

1. 进入项目根目录，安装swiper

yarn add swiper

2. 在需要的vue页面，导入swiper样式和js

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

3. 循环出轮播或者写死轮播，以循环为例

html 部分

<div class="swiper-container">
  <div class="swiper-wrapper">
    
    <!-- 循环的内容视图 -->
    <div class="swiper-slide" v-for="(item, index) in items" :key="index">
      <img class="headerImg" :src="item.image" alt="">
      <h3 class='title2'>{{item.title}}</h3>
      <p class='description'>{{item.subTitle}}</p>
      <div>
        <img src="/image/home/“-1.png"/>
        <small v-for="(item, index) in item.description" :key="index">{{item}}</small>
        <img src="/image/home/“.png"/>
      </div>
      <div class="space-div"></div>
    </div>
  </div>
  
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>
  <!-- 如果需要导航按钮 -->
  <div class="swiper-button-prev swiper-button-black"></div>
  <div class="swiper-button-next swiper-button-black"></div>
</div>

js 部分

mounted() {
  new Swiper('.swiper-container', {
	  direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
  
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

		// 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
}

data(){
	return {
    items:[
        {
            title:"张三",
            subTitle:"总监",
            description:[
                "很棒到系统！数据精确到不可思议，这让我们在做每一个决策的时候更有信心。"
            ],
            image:"/image/home/zhangsan.jpg"
        },
        {
            title:"贝李四",
            subTitle:"客服总监",
            description:[
                "用起来流畅愉快，员工很快就可以上手，几乎零培训成本了。"
            ],
            image:"/image/home/lisi.jpg"
        },
        {
            title:"赵五",
            subTitle:"总经理",
            description:[
                "描述描述描述描述描述描述描述描述,描述描述描述描述,描述。"
            ],
            image:"/image/home/zhaowu.jpg"
        }
    ]
	}
},

参考链接：https://www.swiper.com.cn/usage/index.html