在Vue中运用Swiper

Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

安装

npm install vue-awesome-swiper --save

引入

引入方式有两种，一种全局引入，一种为组件引入，根据自己需求去引入文件。

• 全局引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

• 组件引入

import 'swiper/dist/css/swiper.css'

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

export default {
  components: {
    swiper,
    swiperSlide
  }
}

使用

<template>
  <swiper :options="swiperOption">
    <!-- 轮播 -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <!-- 可选配置 -->
    <!-- 分页器 -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <!-- 前进后退按钮 -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <!-- 滚动条 -->
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>

swiperOption: {
    // 分页器
    pagination: {
      el: '.swiper-pagination'
    },
    // 前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    // 是否无限循环
    loop: true,
    // 切换方式
    effect: 'cube'
  }

一个基本的轮播就做好了，有关于更多详细API，请移步官网 API。
Swiper4 API : https://www.swiper.com.cn/api/navigation/355.html