Swiper基本使用

Vue

旧版

下载依赖包

npm install swiper

在轮播组件中引入swiper和其css

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

设置轮播的位置以及容器

<div class="swiper-container" ref="swiper" id="mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in banners" :key="item.id">
            <img :src="item.imageUrl" style="width: 100%; height: 435px" />
        </div>
    </div>

    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

创建Swiper实例

原则上一个Swiper实例只控制一个轮播图，而且Swiper实例一定要在界面显示后再创建，不然无法控制图片轮播

// 数据更新后，先同步调用watch的回调，最后异步更新界面
watch: { // watch监视轮播图片数据是否异步请求回来了
    banners() {
        this.$nextTick(() => { // nextTick会在界面完成更新之后才执行指定的回调
            var mySwiper = new Swiper(this.$refs.swiper, { // 用vue的ref来隔离各个轮播图，防止一个swiper实例控制多个轮播图
                // direction: "vertical", // 垂直切换选项
                loop: true, // 循环模式选项

                autoplay: {
                    delay: 2000,
                    disableOnInteraction: false,
                },
                // 如果需要分页器
                pagination: {
                    el: ".swiper-pagination",
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                // 如果需要滚动条
                scrollbar: {
                    el: ".swiper-scrollbar",
                },
            });
        });
    },
},

新版

使用vue-awesome-swiper制作轮播图。

安装

npm install swiper
npm install vue-awesome-swiper

定义swiper.js文件并注册该组件

定义好swiper.js文件方便模块化管理插件

// swiper.js
import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
Vue.use(VueAwesomeSwiper);

在vue工程的main.js中引入

// main.js
import './swiper.js';

使用

// 轮播组件 tempalte部分
<swiper :options="{
          loop: true, // 循环模式选项
          autoplay: {
            delay: 2000,
            disableOnInteraction: false,
          },
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
            clickable:true
          },
          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
      	}" 
       class="swiper"
       ref="swiper"
       id="mySwiper">
    <swiper-slide v-for="item in banners" :key="item.id">
        <img :src="item.imageUrl" style="width:100%;heigth:435px" />
    </swiper-slide>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div calss="swiper-pagination" slot="pagination"></div>
</swiper>