将分页导航添加到 swipejs 轮播

Question

我正在尝试使用类似于

的 swipe.js 向轮播添加分页导航

http://swipejs.com/

想要的效果将意味着单击将链接中的 1-5 指向轮播上的该幻灯片

现场样本

http://jsfiddle.net/tJH3M/2/

    <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
  <div class='swipe-wrap'>
    <div><b>0</b></div>
    <div><b>1</b></div>
    <div><b>2</b></div>
    <div><b>3</b></div>
    <div><b>4</b></div>
    <div><b>5</b></div>
  </div>
</div>

<nav>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
</nav>

Answer 1

插件有一个函数.slide，可以让你导航到想要的幻灯片。

语法是，

.slide(pos, duration)

因此，在导航中添加一个 ID，例如 #nav，然后向 li 添加一个点击处理程序，并在处理程序内部调用 .slide，并将 index + 1 ($(this).index() + 1) 作为 pos。

$('#nav li').on ('click', function () {
    window.mySwipe.slide($(this).index() + 1, 200);
});

演示： http://jsfiddle.net/xYDf4/

添加了一些样式以突出选择http://jsfiddle.net/xYDf4/1/

编辑：添加了同步寻呼机和下一个/上一个按钮的条件以将它们标记为选中http://jsfiddle.net/xYDf4/2

$('#mySwipePrev').on('click', function () {
   mySwipe.prev();

   $navLi.removeClass('selected');
   $navLi.eq(mySwipe.getPos() - 1).addClass('selected');
});
$('#mySwipeNext').on('click', function () {
   mySwipe.next();
   $navLi.removeClass('selected');
   $navLi.eq(mySwipe.getPos() - 1).addClass('selected');
});

Answer 2

试试这个类似的插件，它可以完成你的任务。

http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/?utm_source=javascriptweekly&utm_medium=email
http://www.woothemes.com/flexslider/