订阅汇聚素材网Feed

Swipe JS 轻量级移动滑动组件

Swipe 官网: JS – a lightweight mobile web slider

Swipe github网址:https://github.com/thebird/swipe

Swipe Demo演示:http://www.idangero.us/swiper/demos/

Swipe API:http://www.idangero.us/swiper/api/

Swiper是由iDangero.us开发的一款免费移动端触摸滑块幻灯片插件,不但能够适用于各种操作系统的手机,还能够利用HTML5的硬件 加速功能来完成滑块的切换效果,其效果以及实用性非常强。该插件原主要适用于iOS的设计,但也适用于Android、Windows Phone和最新的桌面浏览器,当然也可以使用在APP上,如微信、QQ等等。

一、Swiper的特点

下面就为大家介绍下该插件的特点:

1、1:1 触控运动
Swiper默认为1:1的触控距离,比率可以自定义。

2、触控模拟
能让鼠标也支持触摸滑动效果,可以在PC端也能滑动起来,也就是支持在电脑端鼠标滑动。

3、水平或垂直
有两种运动模式,horizontal(水平滑动)以及vertical(垂直滑动)。

4、自由模式
能够让slides无需定位,就像通常的滑动条。(可以在演示地址体验)

5、旋转调整
Swiper 在移动设备旋转后可以自适应尺寸,可以自动根据设备旋转和缩放。

6、响应式布局
slides的高度使用百分比来设置,从而解决不同移动端的适配。

7、滑动阻止
会自动限制一种模式,水平或者垂直。

8、滑块反弹
反弹机制,当滑块到达最左或者最右(最上或者最下)的位置时,会触发回弹效果。

9、原生动态
使用原生的转换效果,html5动画属性。

10、内置分页控制
能自动生成分页控制机制,可以指定控制器的标签pagination。

11、自动播放
Swiper可以设置自动播放,以及自动播放的延迟时间。

12、循环模式
可以自由设置开启和关闭,开启后,能够无限的播放幻灯片,到了最后一个位置时,会切换回第一个(无缝切换)。

13、旋转模式
能够让你在slides父容器下设置你所需要展示的slides数量来旋转播放。

14、滚动容器
该功能可以在容器里面滚动内容(不是指幻灯片,而是幻灯片里面的内容滚动),特别适用于APP的开发效果。

15、嵌套幻灯片
能够将swiper嵌套入各种不同的Swiper的slide里面,例如第一个slide里面可以放在一个水平的,而第二个slide里面可以放置垂直的。

16、放置HTML标签
该幻灯片插件,不只是允许放置图片标签,而且可以放置任意的HTML标签,例如文本、视频等等。

17、硬件加速
swiper可以使用设备硬件加速技术,能大幅度的改善动画效果以及优美的流畅性,特别是在IOS系统里面表现的更加完美(硬件加速需要设备支持)。

18、丰富的API接口
swiper拥有着非常丰富的api接口,例如:onTouchStart、onTouchMove、onTouchEnd、onSlideSwitc、autoplay等等。

19、灵活的配置
Swiper在初始化的时候能够接受多个参数,可以非常灵活的配置插件的效果。

20、插件API
Swiper从1.7版本开始就变的更加强大,因为有更多而简单的插件API允许开发者创造属于自己的Swiper 插件或通过Swiper的核心创制hooks(挂钩)(该官网处提供了几款优秀的插件Swiper smooth progress, Swiper hash navigation,swiper scrollbar)。

21、良好的兼容性
Swiper通用性的测试环境:移动端的Safari(iOS5下),Android 2.1+,windows Phone 8,以及最新版本的谷歌浏览器(Chrome),Safari,Firefox,IE10 以及欧朋浏览器(Opera)。

22、对IE的兼容
能够兼容IE7以上的版本,在IE7中使用的DOM动画,而非css transitions切换,所以需要引入jQuery。

23、独立性
Swiper不依赖像jQuery那样的js类库,这样子Swiper会更加的小型以及快速,从而使用不同的手机设备环境。但Swiper也能很安全地应用诸如jQuery、jQuery Mobile,jQTouch等等其他的js类库。

24、超轻量级
压缩后仅仅10KB左右,独立运行,不依靠第三方类库。

看完之后是不是感觉很激动?基本上此插件可以完成大部分的移动滑块的需求了。

二、Swiper的使用

那么接下来就跟大家说下简单的用法,首先引入核心文件js,以及自带的默认css样式表:

<link rel="stylesheet" href="idangerous.swiper.css">
<script defer src="idangerous.swiper.min.js"></script>

HTML结构以及插件初始化配置:

<div class="device">
     <a class="arrow-left" href="#" rel="external nofollow"  rel="external nofollow" ></a> 
     <a class="arrow-right" href="#" rel="external nofollow"  rel="external nofollow" ></a>
     <div class="swiper-container">
       <div class="swiper-wrapper">
         <div class="swiper-slide"> <img src="http://img.jiawin.com/2015/01/05142321afe81f00b1a4495.png"> </div>
         <div class="swiper-slide"> <img src="http://img.jiawin.com/2015/01/05142321afe81f00b1a4495.png"> </div>
         <div class="swiper-slide">
           <div class="content-slide">
             <p class="title">Slide with HTML</p>
             <p>在这里放置任意html,例如html文本、视频。</p>
             <p><a href="http://www.jiawin.com/">觉唯网</a>,推崇以用户为中心的设计理念,致力于为设计爱好者提供一个良好的学习交流平台。</p>
           </div>
         </div>
       </div>
    </div>
    <div class="pagination"></div>
</div>

插件初始化配置:

<script>
var mySwiper = new Swiper('.swiper-container',{
     pagination: '.pagination',
     loop:true,
     grabCursor: true,
     paginationClickable: true
})
$('.arrow-left').on('click', function(e){
     e.preventDefault()
     mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
     e.preventDefault()
     mySwiper.swipeNext()
})
</script>

其实看来操作使用起来还是挺方便的,代码也不会很复杂。

7 人Likes
  

文章转载请注明:Swipe JS 轻量级移动滑动组件-汇聚素材网

本文固定链接:http://www.webhj.com/hj-2292.html  +复制链接

Swipe JS 轻量级移动滑动组件:等您坐沙发呢!

发表评论

*

*

1 + 8

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍