Swiper 版本区分了组件和普通版本

(1)npm install vue-awesome-swiper –save

(2)在 main,js 里引入(全局):

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'

(3)组件里引入 :

import ‘swiper/dist/css/swiper.css’ //在全局没引入,这里记得要!
import { swiper, swiperSlide } from ‘vue-awesome-swiper’
export default {
components: {
swiper,
swiperSlide
}
}

配置

(4)template

<swiper :options="swiperOption">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> </swiper>

(5)数据

 data(){
return{
swiperOption: {
pagination:{
el:'.swiper-pagination'
},
autoplay:{
delay:,
disableOnInteraction:false
}
swiper参数
}
}
}

.

vue-awesome-swiper 插件的更多相关文章

  1. vue中引入swiper插件

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

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

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

  3. 如何在Vue项目中优雅的使用swiper插件

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架 ...

  4. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

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

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

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

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

  7. Vue 自定义一个插件的用法、小案例及在项目中的应用

    1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象   MyPlugin.install = function (Vue, options) {   // 1 ...

  8. swiper插件遇上tab切换

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

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

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

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

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

随机推荐

  1. mysql 自动备份命令

    --1.全备 --single-transaction:基于此选项能实现热备InnoDB表  --databases要备份的表名mysqldump -u root -p --single-transa ...

  2. HDU - 1099 - Lottery - 概率dp

    http://acm.hdu.edu.cn/showproblem.php?pid=1099 最最简单的概率dp,完全是等概率转移. 设dp[i]为已有i张票,还需要抽几次才能集齐的期望. 那么dp[ ...

  3. 51nod 1013【快速幂+逆元】

    等比式子: Sn=(a1-an*q)/(1-q) n很大,搞一发快速幂,除法不适用于取膜,逆元一下(利用费马小定理) 假如p是质数,且gcd(a,p)=1,那么 a^(p-1)≡1(mod p).刚好 ...

  4. Lightoj1013【DP_LCS】

    题意: 给你两个字符串,让你求一个最短字符串,其中存在给出串的种类: 求这个字符串的长度和种类: 思路: //dp[i,j,k]表示前i个字符,包含s1串前j个字母,包含s2串前k个字符时的方案数. ...

  5. Codeforces691A【读题-水】

    妈蛋wa了两次.. 时尚的定义是length大于1的要破个洞,一定要破个洞.. According to rules of the Berland fashion, a jacket should b ...

  6. [Xcode 实际操作]七、文件与数据-(20)CoreML机器学习框架:检测和识别图片中的物体

    目录:[Swift]Xcode实际操作 本文将演示机器学习框架的使用,实现对图片中物体的检测和识别. 首先访问苹果开发者网站关于机器学习的网址: https://developer.apple.com ...

  7. Linux之expect非交互式功能

    我在上一篇博文linux之SSH密钥认证 提过ssh之间的相互认证,但是每次使用ssh登录到其它服务器还是要输入密码的. expect是用于提供自动交互的工具,自动连接被管理的服务器,不需要手动输入密 ...

  8. EasyUI/TopJUI可编辑表格的列根据返回数据判断是使用 combobox 还是 numberbox

    这两天研究了一下topjui的可编辑表格edatagrid,想在每一列的后面根据返回的数据判断是使用 combobox 还是 numberbox,期间遇到了一些坑,下面实现代码,需要的朋友可以参考一下 ...

  9. Servlet | 访问不同格式文件(PDF、doc)

    核心代码 //设置响应内容类型为PDF类型 response.setContentType("application/pdf"); request.getRequestDispat ...

  10. ios开发static关键字的理解

    :static关键字修饰局部变量::当static关键字修饰局部变量时,该局部变量只会初始化一次,在系统中只有一份内存 :static关键字不可以改变局部变量的作用域,但是可延长局部变量的生命周期,该 ...