Swiper

2018-05-16 admin

Swiper是什么

什么是Swiper,Most modern mobile touch slider and framework with hardware accelerated transitions

Swiper介绍

Join the chat at https://gitter.im/nolimits4web/SwiperBuild StatusdevDependency StatusjsDelivr Hits

Swiper

Greenkeeper badge

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

Getting Started

Dist / Build

On production use files (JS and CSS) only from dist/ folder, there will be the most stable versions, build/ folder is only for development purpose

Development Build

Swiper uses gulp to build a development (build) and production (dist) versions.

First you need to have gulp-cli which you should install globally.

$ npm install --global gulp

Then install all dependencies, in repo’s root:

$ npm install

And build development version of Swiper:

$ npm run build:dev

The result is available in build/ folder.

Production Build

$ npm run build:prod

Production version will available in dist/ folder.

Contributing

All changes should be committed to src/ files only. Before you open an issue please review the contributing guideline.

Swiper 3.x

If you are still using Swiper 3.x.x, you may find it in Swiper3 Branch

Swiper 2.x

If you are still using Swiper 2.x.x or you need old browsers support, you may find it in Swiper2 Branch

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-32338.html

文章标题:Swiper

相关文章
swiper 在 vue 中的应用(以3.0为例)
一、使用方法 官网地址 参考此文章(点击我) 二、常见情况 图片需要动态获取时 待数据加载成功且渲染完毕后,进行节点初始化。例: axios.post(‘接口地址’, 参数).then(response => { ...
2018-09-18
小程序swiper不显示元素
问题描述: swiper中嵌套多个swiper-item,数量是动态循环生成的。 目前存在的问题是:在页面首次加载时元素正常显示,当切换页面进行操作时,会改变轮播数据,当再次返回页面时,轮播图的元素不显示,但是审查元素是存在的。 存在原因:...
2018-07-10
引用swiper的vue项目在ie浏览器下打开页面空白的问题,由此想到的编程习惯方面的思考
在做公司官网时前期没注意到检查ie浏览器的兼容,到项目尾声的时候才发现在ie下一片空白。 工程里东西已经很多了,定义不到具体是因为什么出的错,拔剑四顾心茫然的感觉。只想到简单地在网上百度vue项目在ie浏览器下打开空白的解决办法,所有人都说...
2018-08-01
玩转3D Swiper性感秀之思路分析总结
解析: 创建列DIV : 从上图中我们能看出,每次旋转的动画是由多列小卡片组成的; 每列根据它的下标,对背景进行位移,做到拼接的效果,整体看起来就成了一张图 一起来看一下真像是啥样的: colNode(){ //...
2018-11-06
关于Vue中Swiper图片加载问题
有时我们在vue组件中使用swiper,而swiper中的图片是ajax获取的,会导致轮播图中只有第一张具有轮播图效果,这是因为ajax获取数据是异步的,所以new swiper()会先执行,等到ajax数据获取之后,dom重新渲染,但是此...
2018-11-04
vue 使用swiper插件
在vue项目中,使用swiper插件,使用回调函数,在数据中定义swiperOption对象,在对象中调用swiper的回调函数 data () { return { realIndex: 0, swiper...
2018-12-16
在swiper中video同层播放层级过高遮挡模拟poster的问题
在ios和android上有显示的区别,如果你只是显示一个普通的网页,只需要在iOS上加上webkit-playsinline=“true” 安卓上x5-video-player-type=“h5” x5-video-player-full...
2018-12-20
vue-awesome-swiper页面渲染轮播无效的问题
vue-awesome-swiper的问题 使用vue-cli搭建的项目,在图片轮播部分采用了vue-awesome-swiper插件,没有数据时有轮播效果,接入数据渲染时,轮播无效。在网上查找一番之后,解决方法是,在最外面的swiper标...
2019-01-12
记vue使用swiper插件遇到的坑
npm install swiper --save-dev 一、在main.js引入swiper的css样式 import 'swiper/dist/css/swiper.css' 二、在需...
2019-01-14
回到顶部