jquery - 将分页导航添加到 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 到你的导航 say #nav，然后添加一个点击处理程序到处理程序内部，使用( ) 作为 posli调用。.slideindex + 1$(this).index() + 1

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

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

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

编辑：添加条件以同步寻呼机和 Next/Prev 按钮以将它们标记为选中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/