最近做项目用到了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. Go xmas2020 学习笔记 04、Strings

    04-Strings.unicode.utf-8.类型描述符.go 字符串在内存中的存储. Strings. String structure. String functions. Practice

  2. JavaWeb学习day7-Response初学3(重定向)

    重定向:web资源收到客户端请求后,通知客户端去访问另外一个web资源 1 protected void doGet(HttpServletRequest req, HttpServletRespon ...

  3. CF problem: (D) Maximum Product Strikes Back

    Problem - D - Codeforces Example input 5 4 1 2 -1 2 3 1 1 -2 5 2 0 -2 2 -1 3 -2 -1 -1 3 -1 -2 -2 out ...

  4. Python中的Super详解

    这篇文章我们来介绍一下 super,我相信大部分的人使用 super 都是使用这种方式: # 就是我有一个 class 比如说是 Male,然后继承另外一个 class 比如是 Person,然后我在 ...

  5. 数据库基础知识详解五:MySQL中的索引和其两种引擎、主从复制以及关系型/非关系型数据库

    1.MySQL中的索引 在MySQL,索引是由B+树实现的,B+是一种与B树十分类似的数据结构. 形如下面这种: 其结构特点: (1)有n课子树的结点中含有n个关键码. (2)非根节点子节点数: ce ...

  6. 通过配置文件(.htaccess)实现文件上传

    一·什么是服务器配置文件.htaccess 许多服务器还允许开发人员在各个目录中创建特殊的配置文件,以便覆盖或添加一个或多个全局设置.例如,Apache 服务器将从一个名为(.htaccess如果存在 ...

  7. ucore lab1 操作系统启动过程 学习笔记

    开头赞美THU给我们提供了这么棒的资源.难是真的难,好也是真的好.这种广查资料,反复推敲,反复思考从通电后第一条代码搞起来理顺一个操作系统源码的感觉是真的爽. 1. 操作系统镜像文件ucore.img ...

  8. 痞子衡嵌入式:大话双核i.MXRT1170之在线联合调试双核工程的三种方法(IAR篇)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是i.MXRT1170下在线联合调试双核工程的方法(基于IAR). 前段时间痞子衡写过一篇<双核i.MXRT1170之单独在线调试从 ...

  9. NLP教程(6) - 神经机器翻译、seq2seq与注意力机制

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/36 本文地址:http://www.showmeai.tech/article-det ...

  10. HMS Core使能AI智慧体验,共建创新应用生态

    5月17日,2022年搜狐科技峰会成功举办,峰会汇聚各界大咖,共同探讨AI 技术的深入应用以及行业数字化的发展趋势.华为终端云服务应用生态BU总裁望岳发表题为<使能AI智慧体验,共建创新应用生态 ...