怎么控制swiper 控制滑动位置开启自由模式

来源：蜘蛛抓取(WebSpider) 时间：2017-03-04 09:28 标签： swiper 缩略图控制 左
swiper-slider具有硬件加速的移动端触摸滑块插件_觉唯设计
在之前给大家分享过一款移动端的内容滑块插件《》，但该插件存在几个缺点，导致使用起来有点困难。很多同学都来问觉唯，该怎么解决呢？那么觉唯就为大家解决这个问题，解决方案是使用另外一个功能极其强大的插件：Swiper – Mobile touch slider and framework with hardware accelerated transitions。按照觉唯惯例，demo先送上，一共有19个演示效果，大家可以前往体验。
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="../dist/idangerous.swiper.css" rel="external nofollow" &
&script defer src="../dist/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="/uploads/42321afe81f00b1a4495.png"& &/div&
&div class="swiper-slide"& &img src="/uploads/42321afe81f00b1a4495.png"& &/div&
&div class="swiper-slide"&
&div class="content-slide"&
&p class="title"&Slide with HTML&/p&
&p&在这里放置任意html，例如html文本、视频。&/p&
&p&&a href="/"&觉唯网&/a&，推崇以用户为中心的设计理念，致力于为设计爱好者提供一个良好的学习交流平台。&/p&
&div class="pagination"&&/div&
插件初始化配置：
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()
通过上面的代码输出，就可以使用这个插件了。操作使用起来还是挺方便的，代码也不会很复杂。
关于这个插件的更多API使用方法以及参数，大家可以前往官网查询：。
记住我的登录
您也可以使用第三方帐号登录
您也可以使用第三方帐号快捷注册微信小程序swiper组件怎么样变成正方形？高度怎么控制？ | 掉进前端的坑

我要回帖

更多关于 swiper 缩略图控制 左 的文章

 

随机推荐