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"
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"
rel="external nofollow"
rel="external nofollow" &&/a&
&a class="arrow-right" href="#" rel="external nofollow"
rel="external nofollow"
rel="external nofollow"
rel="external nofollow" &&/a&
&div class="swiper-container"&
&div class="swiper-wrapper"&
&div class="swiper-slide"& &img src="//static.jiawin.com/uploads/42321afe81f00b1a4495.png"& &/div&
&div class="swiper-slide"& &img src="//static.jiawin.com/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="http://www.jiawin.com/" rel="external nofollow" &觉唯网&/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 轮播插件遇到的问题及解决方法-经验总结-w3h5已解决问题
在使用swiper插件有多个切换页面（左右滑动）时，怎么把这些页面写成几个html？
提问时间： 14:26:45
在需要滑动时，swiper默认是在一个html里面写好几个页面，现在怎么把这些div里的内容单独分开写成各自的html，也能实现滑动。
浏览次数：4648
你的css是写在哪儿的? 1.写在外链的css文件中,则记得在里面添加外链代码
其中style.css是你外部css文件名 2.写在html页面的里面
*{font-size:10}//通配符是用于定义网页所有标签的样式 body{font-size:10}//这个样式是用于定义body中的标签样式 //在html中,一般以上两种定义字体大小的方法都可以,*定义的范围会比较广一点,你会发现很多网页有这么一行代码 *{margin:0;padding:0;}//这个是用于更改ie的3像素bug
3.二楼给的写法 也是定义标签样式的一种方法,一般没学过css的初学者这样定义样式是比较方便的,但这样写管理起来很麻烦,代码冗杂,又长又臭,特别是代码多了以后,想修改就更麻烦了,而且代码也不美观,还可能会影响浏览速度....所以还是建议使用上面两种比较好,熟练以后就用第一种 4.其实还有很多定义样式的方法,网上找找资料,慢慢学习,不难的 你说的控制多层嵌套的表格,其实你可以给你要控制的单元格加个id或者class, 然后把他们的样式写进css里面 我简单写一下,嵌套就不写了,最讨厌表格了,实在是太麻烦了
文字是红色的,14px//class定义的样式可以多次用 文字是黑色的,11px//id定义的样式只对一个标签有用
//用了上面的class样式 这里面的文字是红色的,14px
在样式表中这样写他们的样式 ①.type01{color:#FF0;font-size:14}//class=&type01&的标签 #.type01{color:#000;font-size:11}//id=&type01&的标签 //写进css文件里面 ②
.type01{color:#FF0;font-size:14}//class=&type01&的标签 #type01{color:#000;font-size:11}//id=&type01&的标签
③可以不用定义样式的id,class,直接在标签中写样式,比较麻烦,简写
文字是红色的,14px 文字是黑色的,11px
不多说了,再说,就像臭婆娘的袜子了,又长又臭。
答案创立者
以企业身份回答&
快速解决你的电商难题
店铺优化排查提升2倍流量
擅长&nbsp 店铺优化
您可能有同感的问题如何使用Swiper在同一个页面上多个轮播组件
之前在公司是做后端的，现在回家这N线城市里的小公司什么都要自己来，年轻就多学学吧~~~~~
现在切入正题~~~这几天写前台的页面发现Swiper非常强大，公司项目又要求弄成响应式的所以项目里有整合Bootstrap，Swiper目前在用的过程中没有发现和Bootstrap有冲突，但是在其中的一个页面需要多个轮播组件。所以直接上代码吧
页面代码：&div class="swiper-container hidden-xs swiper-container1"&
&div class="swiper-wrapper"&
&div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/business1.png);"&&/div&
&div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/business1.png);"&&/div&
&div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/business1.png);"&&/div&
&div class="swiper-pagination swiper-p1"&&/div&
&div class="swiper-container visible-xs-block swiper-container2"&
&div style="height:51"& &/div&
&div class="swiper-wrapper"&
&div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/index0-mob.jpg);"&&/div&
&div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/index0-mob.jpg);"&&/div&
&div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/index0-mob.jpg);"&&/div&
&div class="swiper-pagination swiper-p2"&&/div&
&/div&控制脚本：
var swiper = new Swiper('.swiper-container1', {
pagination: '.swiper-p1',
direction: 'vertical',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
mousewheelControl: true
var swiper2 = new Swiper('.swiper-container2', {
pagination: '.swiper-p2',
direction: 'vertical',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
mousewheelControl: true
这里也感谢下群里的前端朋友，给的指点~~本人小菜其实这样的用法官网已经有给出了（状态不好，扫一眼没注意呀！），人状态不好脑子容易短路呀~~~
Swiper官网演示地址：
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！swiper两个demo可以在同一个页面中使用吗_百度知道
swiper两个demo可以在同一个页面中使用吗
两个例子因为class相同，又不能更改，如何能同时使用
我有更好的答案
js例： &script&
var swiper = new Swiper('.module01 .swiper-container', {
pagination: '.module01 .swiper-pagination',
paginationClickable: true,autoplay : 1000
}); var swiper = new Swiper('.module02 .swiper-container', {
slidesPerView:5,
paginationClickable: true,
spaceBetween:0,
freeMode: true
&/script&获取他们共用的class的时候加上父元素区分开。写style的时候.swiper-container和.swiper-paginatio是共用的不要写在里面新建class区分写改变它们不同的样式。个人用法运用需考虑。
采纳率：100%
为您推荐：
其他类似问题
demo的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。