jquery 滑块_使用SwipeJS和jQuery创建支持触摸的滑块[教程]
图片/内容滑块是我们在网站上发现的常见组件之一。 用jQuery创建一个非常简单。 事实上; 我们在上一教程中已经讨论过一次。 但是，如今，随着使用支持触摸功能的设备的人数不断增加，我们可能不得不重新考虑如何构建它。
通常，滑块配有“ 下一步”和“上一步”按钮来浏览内容，在台式机上可以正常工作。 但是，在触摸设备中，如果用户还能够通过手指滑动来滑动导航，那将更好。 在今天的教程中，我们将向您展示如何使用jQuery和SwipeJS进行构建。
要求
首先，让我们准备好滑块的原料和工具。 我们将需要一个样式表和一个HTML文档， jQuery ， SwipeJS和一些图像–在本教程中，我将使用Jared Lim的精彩照片。
基本设定
SwipeJS非常容易设置。 以下是HTML标记。 我们需要一个id为的div再加上一个div来包装幻灯片列表。 每张幻灯片还用div包裹，您可以在幻灯片中添加任何内容，而不仅仅是图像。
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div><img src="img/cellumination.jpg" width="600" height="350"></div>
<div><img src="img/color-zone.jpg" width="600" height="350"></div>
<div><img src="img/diagonal-path.jpg" width="600" height="350"></div>
<div><img src="img/fractal-reflection.jpg" width="600" height="350"></div>
<div><img src="img/origami.jpg" width="600" height="350"></div>
</div>
</div>SwipeJS需要几行基本样式规则。 这些样式规则定义滑块的宽度，并内联显示滑块。
.swipe {
overflow: hidden;
position: relative;
max-width: 600px;
width: 100%;
height: 350px;
margin: 100px auto 0;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
} 这是将滑块置于活动状态JavaScript部分。 为了使脚本正常运行，我们需要确保首先加载整个文档。 我们可以通过在页面底部添加脚本或使用jQuery .ready()方法来实现。
$(document).ready(function(){
// we add the code here
});使用jQuery，我们可以像这样添加Swipe函数。
Slider = $('#slider').Swipe().data('Swipe'); 这是基本设置，它将使用默认配置运行滑块。 SwipeJS接受一些参数来更改默认配置。 这些参数必须在.Swipe() ，例如：
Slider = $('#slider').Swipe({
auto: 3000,
continuous: false
}).data('Swipe');使用API
此外，我们可以使用提供的API来控制滑块的行为。 在此示例中，使用.prev()的.next()和.prev()方法，我们可以进行导航。
首先，让我们添加按钮，如下所示：
<span class="nav prev">Prev</span>
<span class="nav next">Next</span> 然后结合jQuery click事件，我们可以执行以下操作，以便当用户单击按钮时，它将显示分配的下一张幻灯片或上一张幻灯片。
$('.next').on('click', Slider.next);
$('.prev').on('click', Slider.prev);现在，您可以在演示页面中看到运行中的滑块，最好在触摸屏设备中进行尝试。