Touchslider主要用于网页幻灯片，手机端滑动等方面。功能强大，支持触摸屏触摸滑动，普通桌面网站鼠标点击滑动；兼容性好，适用于主流的桌面及移动(基于Weibkit)浏览器；流畅性，Android 和 iOS 等移动平台上的交互表现非常流畅，无任何卡顿现象。通过Touchslider交互脚本+CSS3可以写出一流的炫酷的幻灯片、滑动模块等多种交互效果。

根据 touchslider官网 给出的Demo 代码如下：

第一步：引入jQuery及插件脚本。

<script src="jquery.min.js"></script>
<script src="jquery.touchslider.min.js"></script>

第二步：编写html及css代码（官网demo）。

<div class="touchslider">
    <div class="touchslider-viewport" style="width:500px;overflow:hidden"><div>
        <div class="touchslider-item"><!-- your html content --></div>
        <div class="touchslider-item"></div>
        ...    </div></div>

    <div>
        <span class="touchslider-prev">←</span>
        <span class="touchslider-nav-item touchslider-nav-item-current">1</span>
        <span class="touchslider-nav-item">2</span>
        ...        <span class="touchslider-next">→</span>
    </div></div>

第三步：编写配置调用Touchslider的脚本代码。

<script>
    jQuery(function($) {    $(".touchslider").touchSlider({/*options*/});});
</script>

调用Touchslider的参数含义：

<script>jQuery(function($) {
    $(".touchslider").touchSlider({
        container: this,
        duration: 350, // 动画速度
        delay: 3000, // 动画时间间隔
        margin: 5,
        mouseTouch: true,
        namespace: "touchslider",
        next: ".touchslider-next", // next 样式指定
        pagination: ".touchslider-nav-item",
        currentClass: "touchslider-nav-item-current", // current 样式指定
        prev: ".touchslider-prev", // prev 样式指定
        scroller: viewport.children(),
        autoplay: false, // 自动播放
        viewport: ".touchslider-viewport"
    });
});</script>

需要开始或者暂停滑动，参考下面的代码：

$(".touchslider").data("touchslider").stop();   // stop the slider
$(".touchslider").data("touchslider").start();  // start the slider