不管是APP还是移动端网页开发，轮播图在大部分项目当中都是存在的，这时候如果用vue开发项目，选择一款好的插件并且封装好是很重要的

1. 推荐使用vue-awesome-swiper

安装：cnpm install vue-awesome-swiper --save

2. 在main.js文件中引入Css跟库

　

3. 新建一个swiper.vue，单独设立一个组件，供多次使用

　

4. swiperOption属性必需是对象类型，这时候我们的配置属性项可以在任何一个父组件当中，例如在index.vue里引用swiper：

　 

所有的swiper配置都可以在swiperOption对象当中去设置

vue轮播图插件vue-awesome-swiper的使用与组件化的更多相关文章

  1. Vue轮播图插件---Vue-Awesome-Swiper

    轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...

  2. vue轮播图插件之vue-awesome-swiper

    移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...

  3. vue 轮播图插件 vue-awesome-swiper

    1.npm安装 npm install vue-awesome-swiper --save 2.vue 引入 //在main.js 中全局引入 import VueAwesomeSwiper from ...

  4. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  5. js 原生轮播图插件

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  7. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  8. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  9. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

随机推荐

  1. VB总结2——内部函数

    VB中内部函数大概有120多个,但是对于我们来说常用的不多,对于那些不常用用的时候再查 常用的内部函数大体可以分为六类: 数学函数,随即函数,字符串函数,数据类型转换函数,日期时间函数,格式输出函数等 ...

  2. raise语句

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #Python学习手册 868 #raise语句 res=[IndexError,TypeError] #ra ...

  3. 关于 while(1)和for(;;)效率问题的一点想法

    这几天看到好友的文章关于while(1)和for(;;)效率的讨论,手痒说了两句.回头一寻思,自己也仅仅是判断.没有做不论什么实验,我们就看看这两种写法究竟有什么差别: 实验环境:IAR EWARM ...

  4. js 取值 getElementsByTagName,getElementsByName

    getElementsByTagName,getElementsByName  获取的值是数组的所以用[0][1]引用 1 <select multiple size="2" ...

  5. Java compiler level does not match解决方法(转)

    本文转自:https://www.cnblogs.com/lauer0246/p/5740572.html#undefined 从别的地方导入一个项目的时候,经常会遇到eclipse/Myeclips ...

  6. web服务器一些概念

    一.Web服务器 Web服务基于HTTP协议,HTTP协议基于TCP/IP协议. HTTP请求底层必然是套接字,也就是TCP协议,HTTP服务器就是监听端口的一个守护进程. 它负责HTTP连接的建立. ...

  7. 房产地图google map的初步应用点滴.2)(转)

    房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) 本来 ...

  8. Linux命令-安全复制命令：scp

    scp是有Security的文件copy,基于ssh登录.操作起来比较方便,比如要把当前一个文件copy到远程另外一台主机上. 命令格式: scp [可选参数] 源文件 目标文件 scp 本地文件 远 ...

  9. 【Linux】排序命令uniq

    很多时候,我们都会去计算一次数据里头的相同型态的数据总数,举例来说, 使用 last 可以查得这个月份有登陆主机者的身份.那么我可以针对每个使用者查出他们的总登陆次数吗? 此时就得要排序与计算之类的命 ...

  10. 消息队列内核结构和msgget、msgctl 函数

    一.消息队列 1.消息队列提供了一个从一个进程向另外一个进程发送一块数据的方法 2.每个数据块都被认为是有一个类型,接收者进程接收的数据块可以有不同的类型值 3.消息队列与管道不同的是,消息队列是基于 ...