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. JAVA基础--JAVA API集合框架16

    一.Map集合 1. map集合介绍 Collection集合的特点: 集合中存储的所有元素都是单一元素,元素和元素之间没有必然的关系.因此我们把Collection集合也称为单列集合. Map集合: ...

  2. React 从入门到进阶之路(七)

    之前的文章我们介绍了 React 表单详解 约束性和非约束性组件 input text checkbox radio  select  textarea  以及获取表单的内容.接下来我们将介绍 Rea ...

  3. React 从入门到进阶之路(六)

    之前的文章我们介绍了 React 表单事件 键盘事件 事件对象以及 React中 的 ref 获取 dom 节点 .双向数据绑定.接下来我们将介绍 React 表单详解 约束性和非约束性组件 inpu ...

  4. ASP.NET Core编程实现基本身份认证

    概览 在HTTP中,基本认证(Basic access authentication,简称BA认证)是一种用来允许网页浏览器或其他客户端程序在请求资源时提供用户名和口令形式的身份凭证的一种登录验证方式 ...

  5. opengl VAO ,VBO

    A Vertex Array Object (VAO) is an object which contains one or more Vertex Buffer Objects and is des ...

  6. 稳定UI运行结果-自动化测试失败重试和截图

    运行自动化测试的时候,有时会因为网络不稳定,测试环境或者第三方环境正在重启而造成用例运行结果不稳定,时而能跑过时而跑不过.这些难以重现的环境因素造成的用例失败会让测试人员很困扰,排查即耗费时间也没有太 ...

  7. 笔记-JavaWeb学习之旅4

    JDBC: 概念:Java DataBase Connectivity Java 数据库连接,Java语言操作数据库 本质:其实是官方(sun公司)定义的一套操作所有关系型数据库的规则,即接口,各个数 ...

  8. CF1138D.Camp Schedule

    传送门 虽然是D,但是还是Sb题,把模式串跑一遍KMP,然后把按顺序放,每次放完之后跳到对应的前缀,继续放. 如果最后1的数量还有剩,再将最后的位数全部放1 代码: #include<cstdi ...

  9. tensorflow:实战Google深度学习框架第四章01损失函数

    深度学习:两个重要特性:多层和非线性 线性模型:任意线性模型的组合都是线性模型,只通过线性变换任意层的全连接神经网络与单层神经网络没有区别. 激活函数:能够实现去线性化(神经元的输出通过一个非线性函数 ...

  10. Linux —— 文件搜索命令

    文件搜索命令(配置文件/etc/updatedb.conf) locate 文件名 搜索速度非常快 在后台数据库中按照文件名搜索 updatedb 更新数据库 只可以按照文件名搜索 whereis 命 ...