不管是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. 前端框架（二）DIV多选复选框框的封装和MySql数据库存取

    图能够包括的寓意和含义是文字不能比拟的,先有一个效果图你也就知道这篇文章的主要内容是关于什么问题的.省去了一大堆文字的累述.看以下这张图: watermark/2/text/aHR0cDovL2Jsb ...

  2. 建maven私服nexus

    1.下载nexus 2.配置java环境 3.安装 C:\Program Files\nexus\nexus-2.11.4-01\bin\jsw\windows-x86-64 4.配置 http:// ...

  3. ubuntu开机自动启动xampp/lampp的两种方法

    方法一: sudo ln -s /opt/lampp/lampp  /etc/init.d/lampp sudo update-rc.d -f lampp defaults 方法二: 1. 在/etc ...

  4. sp_trace_setfilter sqlserver筛选跟踪或跟踪过滤

    sp_trace_setfilter sp_trace_setfilter [ @traceid = ] trace_id , [ @columnid = ] column_id , [ @logic ...

  5. 〖Linux〗Ubuntu13.10中打开键盘背光灯

    刚刚从淘宝上买回一个带有Led背光的键盘(黑爵战神x5 背光升级版): 然后发现在Linux中背光灯并不亮,在Windows中就可以按下Scroll Lock键点亮: 在网上探索了一番,觉得应该可以使 ...

  6. HDUOJ--4565 So Easy!

    So Easy! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  7. HDUOJ--8球胜负

    8球胜负 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  8. ubuntu 忘记root密码了不用怕，看这里

    方法来自这里:http://jingyan.baidu.com/article/8065f87fe20832233024985a.html

  9. 【Linux】在线求助man page与info page

    先来了解一下Linux有多少命令呢?在文本模式下,你可以直接按下两个[Tab]按键,看看总共有多少命令可以让你用? [knife@www ~]$ <==在这里不要输入任何字符,直接输入两次[ta ...

  10. C#中遍历DataTable类型并删除行数据

    从数据库中读取出了DataSet类型的数据,通过dataSet.Tables[0]获得DataTable类型的数据. 这时候如果想批量修改dataTable中的内容,比如要删除dataTable中co ...