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. 利用jstack定位典型性能问题实例

    此文已由作者朱笑天授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 问题的起因是笔者在一轮性能测试的中,发现某协议的响应时间很长,去观察哨兵监控里的javamethod监控可以 ...

  2. 深入探究Java中equals()和==的区别是什么

    目录 相等判断符"==" "=="判断基本类型数据 "=="判断引用类型数据 相等判断方法equals() 思考:为什么要设计equals( ...

  3. Codeforces 744C【DFS】

    题意: 给你一幅图,然后有几个特殊点 和不特殊点,给你一些已经连了的边,在保证特殊点不能连的前提下,问最多还能添几条边,双向边 思路: 简单题,就是一个特殊点就是一个集合,然后搜一下,最后把还有没连的 ...

  4. Modulation of Lipid Metabolism by Celastrol (文献分享一组-赵倩倩)

    文献名:Modulation of Lipid Metabolism by Celastrol (雷公藤红素对脂质代谢调节作用的研究) 期刊名:Journal of Proteome Research ...

  5. 用EnumSet代替位域

    用EnumSet代替位域   如果一个枚举类型的元素主要用在集合中,一般使用int枚举模式,将2的不同倍数赋予每个常量: // Bit field enumeration constants - OB ...

  6. ZooKeeper应用案例

    我们通过学习借鉴,哪些项目或应用都使用了ZooKeeper,可以了解我们的应用使用ZooKeeper是否能真正地带来价值,当然,有些项目可能也未必非常适合使用ZooKeeper,我们要批判地学习.借鉴 ...

  7. Execution failed for task ':app:lintVitalRelease'.

    解决方法:在build.gradle文件的android部分添加如下代码: lintOptions { checkReleaseBuilds false abortOnError false} 最后成 ...

  8. tree(2018.10.26)

    题意:给你一颗树,树上每个节点都有一个权值,多次询问树上的一条链的严格上升子序列长度 这道题是个神奇的倍增,先记录\(fa[x][0]\)为\(x-root\)路径上第一个权值比他大的点,然后顺便处理 ...

  9. Tinghua Data Mining

    Learning Resources 书籍: 期刊: 业界先驱: 开阔视野,掌握业界最新动态. 工具: 数据挖掘是很多学科的综合体: 甭管叫什么名字,归根到底都是数据挖掘: Comprehensive ...

  10. Codeforces 997D(STL+排序)

    D. Divide by three, multiply by two time limit per test 1 second memory limit per test 256 megabytes ...