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

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

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

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

(3)组件里引入 :

  1. import swiper/dist/css/swiper.css //在全局没引入,这里记得要!
  2. import { swiper, swiperSlide } from vue-awesome-swiper
  1. export default {
  2. components: {
  3. swiper,
  4. swiperSlide
  5. }
  6. }

配置

(4)template

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

(5)数据

  1. data(){
  2. return{
  3. swiperOption: {
  4. pagination:{
  5. el:'.swiper-pagination'
  6. },
  7. autoplay:{
  8. delay:,
  9. disableOnInteraction:false
  10. }
  11. swiper参数
  12. }
  13. }
  14. }

.

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. UGUI DOTween渐隐渐现

    Tween tweenAlpha; tweenAlpha = DOTween.To(() => MaskSpr.fillAmount, x => MaskSpr.fillAmount = ...

  2. Unity中资源动态加载的几种方式比较

    http://blog.csdn.net/leonwei/article/details/18406103 初学Unity的过程中,会发现打包发布程序后,unity会自动将场景需要引用到的资源打包到安 ...

  3. Ruby编程实践

    命令 常量大写 类名和模块名首字母大写,驼峰法,MyClass,Person 方法名小写,ruby中末尾添加符号特殊含义:destroyMethod!表示这个方法具有破坏性:isPrime?表示返回b ...

  4. [Xcode 实际操作]九、实用进阶-(10)定位设备的使用

    目录:[Swift]Xcode实际操作 本文将演示定位设备的使用. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //导入需要用到的定位 ...

  5. css 所有选择器 实例与总结

    目录 什么是选择器? 选择器都有那些呢? 标签选择器 ID选择器 类选择器 后代选择器 子代选择器 组合选择器 交集选择器 相邻兄弟选择器 通用兄弟选择器 属性选择器 伪类选择器 什么是选择器? 在c ...

  6. spark sql 的metastore 对接 postgresql

    本教程记录 spark 1.3.1 版本的thriftserver 的metastore 对接 postgresql postgresql 的编译,参考:http://www.cnblogs.com/ ...

  7. js实现打印正三角

    代码: <html> <head> <title>function</title> </head> <body> <scr ...

  8. POJ-1020-Anniversary Cake

    链接:https://vjudge.net/problem/POJ-1020 题意: 给一个宽为s的正方形,再给n个变长为an的小正方形, 判断是否能将这n个小正方形完全填充到这个大正方形里面. 思路 ...

  9. Codeforces Round #533(Div. 2) D.Kilani and the Game

    链接:https://codeforces.com/contest/1105/problem/D 题意: 给n*m的地图,最多9个人,同时有每个人的扩张次数(我开始以为是直线扩张最大长度..实际是能连 ...

  10. IE_Script70:没有权限问题处理

    IE9浏览器执行JS时报"SCRIPT70:没有权限"错误. 经百度,发现原来与jQuery版本有关系,在jQuery1.9.1版本时会有此问题,升级版本即可.