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. Codeforces - 65D - Harry Potter and the Sorting Hat - 简单搜索

    https://codeforces.com/problemset/problem/65/D 哈利波特!一种新思路的状压记忆化dfs,记得每次dfs用完要减回去.而且一定是要在dfs外部进行加减!防止 ...

  2. 小程序接收from表单数据(实例)

    html部分 <form bindsubmit='sub'> <view class="con"> <view class="con-nr& ...

  3. GPU渲染管线与shader

    1 几何阶段(顶点shader处理这部分) 模型坐标空间-世界坐标空间-观察坐标空间-屏幕坐标空间 其中从观察空间 到 屏幕空间需要经过3步(CVV单位立方体,规范立方体) a用透视变换矩阵把顶点从视 ...

  4. hdu1536(sg函数)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1536 题意:首先输入K 表示一个集合的大小  之后输入集合 表示对于这对石子只能去这个集合中的元素的个 ...

  5. shell chpasswd 命令 修改用户密码

    使用useradd 命令增加一个用户后,它默认是没有设置密码的.如果需要给用户设置或者修改密码,一般会使用passwd命名. 但是passwd命令有一个缺陷,它需要人工交互操作. 如果你是一名系统管理 ...

  6. 33、JSONP跨域

    跨域请求数据也是可以的,只不过Ajax这技术不行,而JSONP这种数据格式可以进行跨域.很多年前,浏览器是没有跨域限制的,可以正常跨域,浏览器为了安全和隐私限制了Ajax跨域 JSONP原理就是:将函 ...

  7. STP-2-三个选择

    1.选择根交换机 2.确定根端口 3.确定指定端口     1.选择根交换机   stp中只有一台交换机能成为根(Root),每台交换机按自己的STP逻辑,先发一个hello称自己为根,如果收到了比自 ...

  8. bzoj 1494 生成树计数

    坑了好多天的题,终于补上了 首先发现 \(i\) 这个点和 \(i-k\) 之前的点没有边,所以 \(i-k\) 之前的点肯定联通,只要处理中间 \(k\) 个点的联通状态就好了.我们用最小表示法,\ ...

  9. linux下输出json字符串,用python格式化

    echo '{"name":"chen","age":"11"}' |python -m json.tool 如果是文件 ...

  10. SVN状态图标消失的解决方法

    有些时候我们会发现我们的SVN状态图标会突然消失,所有的文件夹都变成了普通的文件夹格式,这点很不利于我们进行管理. 进入任意一个文件夹,鼠标右键,依次进入TortoiseSVN---Settings ...