6.1、Swiper（滑动组件）

Swiper 简介

https://www.swiper.com.cn/

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

  Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
  Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
  Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

• Swiper拥有灵活的progress，这是自定义制作3D切换效果的利器

  Swiper制作3D切换效果的方法多种多样。cube、coverflow和flip可以轻松的实现3D过渡，如果你想制作其他新颖的切换方式，推荐使用progress。

  progress可以帮助你获取到滑块的进度索引。

• 在Swiper上加些小动画，制作时下最流行的微展示

  使用Swiper再配合一些你喜欢的小动画，你的图片立即变成活灵活现的微场景、微海报。

  常用的制作动画的方法有CSS3、GreenSock、Anime.js、animate.css等。也推荐使用我们的Swiper Animate小插件，无需学习即可快速制作出精美的切换动画效果。

Swiper 在 Vue 中的使用

1、使用npm下载vue-awesome-swiper

npm install vue-awesome-swiper --save

2、在main.js中引用

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'（css需要单独引用）

3、在组件中使用

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

html代码：

<swiper :options="swiperOption">
    <swiper-slide>1</swiper-slide>
    <swiper-slide>1</swiper-slide>
    <swiper-slide>1</swiper-slide>
</swiper>

Javascript代码：

export default {
  name: '',
  data () {
    return {
      swiperOption:{
        slidesPerView: 'auto',
        centeredSlides:true,
        spaceBetween: 10,
        loop:true,
        speed:600, //config参数同swiper4,与官网一致
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }

}