不管是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. MySQL 联合索引测试2

    接上一篇文章: http://www.cnblogs.com/xiaoit/p/4430300.html 1:首先删掉上一篇建立的索引,重新建立一个. mysql> DROP INDEX idx ...

  2. 解决java.lang.OutOfMemoryError: unable to create new native thread问题

    解决:1.升级JVM到最新的版本 最新版本的JVM一般在内存优化方面做的更好,升级JVM到最新的版本可能会缓解测问题2.从操作系统层面去解决 使用64位操作系统 如果使用32位操作系统遇到unable ...

  3. OpenERP的短信（SMS）接口

    今天测试了一下OpenERP的短信(SMS)接口. 在OpenERP的Partner界面上,WebClient的右边的工具条有个“send sms”的按钮.OpenERP中发短信用的是短信的Web接口 ...

  4. 30、java中递归算法

    1.已知有一个数列f(0)=1,f(1)=4,f(n+2)=2*f(n+1)+f(n),其中n是大于0的正数,求f(10)的值. 分析:设x=n+2 => f(x)=2*f(n-1)+f(n-2 ...

  5. RHEL7 timedatectl命令

    1.要显示系统的当前时间和日期,使用timedatectl命令,如下: [root@rhel7 ~]# timedatectl Local time: Mon -- :: EDT Universal ...

  6. 微信小程序项目实战之天气预报

    概述 微信小程序项目实战之天气预报 详细 代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百 ...

  7. 解决windows下MySQL表名大写自动变小写的问题

    解决windows下MySQL表名大写自动变小写的问题   有些人可能会遇到在windows下,表名不能用大写字母, 即使使用了大写字母的建表语句,还是会被自动转成小写.   解决方法:  打开 My ...

  8. PHP基于Sphinx+Swcs中文分词的全文的检索

    简介 Sphinx是开源的搜索引擎,它支持英文的全文检索.所以如果单独搭建Sphinx,你就已经可以使用全文索引了 但是有些时候我们还要进行中文分词所有scws就出现了,我们也可以使用Coreseek ...

  9. C-边界对齐

    转自:http://blog.csdn.net/b_h_l/article/details/7738197 许 多实际的计算机系统对基本类型数据在内存中存放的位置有限制,它们会要求这些数据的首地址的值 ...

  10. 很轻很强大：轻量级桌面环境比较(转自linuxeden)

    这天你终于下定决心购买了一台流行的 Netbook ,与往常装机一样,直接安装心爱的 Linux 发行版.好不容易安装完成了,却发现平日启动飞快的应用程序在 Netbook 上怎么都跑不快.怎么办呢? ...