最近做项目用到了vue-awesome-swiper,总结一下使用方法

第一步:安装依赖

npm install swiper vue-awesome-swiper --save

or npm install swiper vue-awesome-swiper@2.6.7 --save

第二步:引入组件

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    swiper,
    swiperSlide,
  },

第三步:创建容器:

第四步:创建配置对象

    swiperOption: {
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        coverflowEffect: {
          rotate: 0,
          stretch: -80, // slide左右距离
          depth: 400, // slide前后距离
          modifier: 0.5, //
          slideShadows: false, // 滑块遮罩层
        },
        loop: true,
        on: {
          click: function () {
            // 监听点击滑块事件// this.realIndex是当前swpier 实例的对象属性
            // console.log(this.realIndex); // 当前滑块索引
          },
          slideChange: function () {
            console.log(this.realIndex);
          },
        }, //on配置对象用来绑定swipet事件的回调
      },
这里主要swiper的一些监听事件可以在on配置对象中绑定,此时的this是swiper本身
也可以通过下图的方式绑定:

这种方式绑定如果想获取到swiper对象,需要通过绑定ref然后通过:

this.$refs.myswiper.swiper来获取
注意:this.$refs.myswiper.swiper.realIndex就是当前被激活滑块的索引值。可以通过this.slides[realIndex]来获取当前滑块的内容

 
 

关于swiper插件在vue2的使用的更多相关文章

  1. 移动端网站的内容触摸滑动-Swiper插件

    手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...

  2. swiper插件的简单使用,实现图片轮播

    移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例). <!DOCTYPE html> <html lang="en&qu ...

  3. swiper插件遇上tab切换

    当swiper插件遇到tab切换,即display的显示与否属性时,失效,方法如下: <script language="javascript"> var mySwip ...

  4. ionic3 使用swiper插件 实现轮播效果

    由于app的更新迭代 我需要完成新版本设计图的开发 刚开始就遇到一个问题  首页的banner图需要实现某种效果 而ionic3自带的轮播图效果怎么改都改不到我想要的效果 效果图如下  自动播放 不断 ...

  5. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

  6. 【react开发】使用swiper插件,loop:true时产生的问题解决方案

    这2天上班遇到的问题:react使用swiper3插件实现banner轮播,其中有个banner图有个click点击事件,而其他的是页面跳转.出现了一个问题: 就是向右滑动到该帧时的swiper,点击 ...

  7. swiper插件几个容易忽略的地方

    以下内容为swiper4版本的 1.在我们用swiper插件做轮播的当我们左右滑动后会出现自动轮播停止了 此时我们需要在autoplay中 加上这个属性 autoplay:{ delay:1000, ...

  8. vue中引入swiper插件

    这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'v ...

  9. 实战:vue项目中导入swiper插件

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...

随机推荐

  1. 初识ES6(JavaScript)

    初识ES6(JavaScript) 关于ES6: ES6即ECMAScript6,是一种规范,JavaScript遵循了这种规范. *优点:*代码比较简洁. *缺点:*浏览器的兼容性不好. 1.变量和 ...

  2. 【课程汇总】OpenHarmony 成长计划知识赋能第三期系列课程(附链接)

    OpenHarmony 开源开发者成长计划第三期知识赋能课程硬核程度再次升级,带领开发者上手 OpenHarmony 的标准系统应用开发,学习标准设备应用开发,使用 eTS UI 开发分布式应用样例, ...

  3. 基于Composer的Laravel扩展包开发工作流 ,实现laravle项目的文件管理(记录成长)

    PHP Composer包开发 基于Composer的Laravel扩展包开发工作流 实现laravle项目的文件管理,添加文件/文件夹,删除文件,查看代码/文件(代码支持缩进,支持语法高亮) com ...

  4. python mysqldb 报错: ProgrammingError: must be real number, not str 解决

    代码: sql = 'insert into book(book_name,book_desc,origin_price,publish_id,tag_id,book_img) values(%s,% ...

  5. Lab_1:练习1——理解通过make生成执行文件的过程

    lab_0 清华大学ucore实验环境配置详细步骤!(小白入) lab_1 清华大学ucore bootload启动ucore os(预备知识) Lab_1:练习1--理解通过make生成执行文件的过 ...

  6. Java中的JVM和Redis,你了解的透彻么?

    招聘在前不久已经渐渐拉下帷幕了,看到最近技术群一个问题,引起了我的思考:"今年面试为什么那么难?" 想必大家都知道程序员要涨薪主要靠跳槽来完成!但是无论是考试,还是求职,这个难度, ...

  7. Spring Cloud Feign+Hystrix自定义异常处理

    开启Hystrix spring-cloud-dependencies Dalston版本之后,默认Feign对Hystrix的支持默认是关闭的,需要手动开启. feign.hystrix.enabl ...

  8. k8s中应用GlusterFS类型StorageClass

    GlusterFS在Kubernetes中的应用 GlusterFS服务简介 GlusterFS是一个可扩展,分布式文件系统,集成来自多台服务器上的磁盘存储资源到单一全局命名空间,以提供共享文件存储. ...

  9. 通过Go实现AES加密和解密工具

    本文包含如下两个内容: AES加密介绍及实现原理 Go实现AES加密和解密工具 AES加密介绍及实现原理 AES( advanced encryption standard)使用相同密钥进行加密和解密 ...

  10. 由C# dynamic是否装箱引发的思考

    前言 前几天在技术群里看到有同学在讨论关于dynamic是否会存在装箱拆箱的问题,我当时第一想法是"会".至于为啥会有很多人有这种疑问,主要是因为觉得dynamic可能是因为有点特 ...