CODEWITHSUNDEEP
jquerypagination
Rob
Rob

Reputation: 1495

add pagination navigation to swipejs carousel

Im trying to add a pagination navigation to a carousel using the swipe.js similar to

http://swipejs.com/

Desired effect will mean clicking 1-5 in the will link to that slide on the carousel

LIVE SAMPLE

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>

Upvotes: 0

Views: 3824

Answers (2)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

The plugin has a function .slide which allows you to navigate to desired slide.

The syntax is,

.slide(pos, duration)

So add an ID to your nav say #nav, then add a click handler to li and inside the handler, call .slide with the index + 1 ($(this).index() + 1) as pos.

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

DEMO: http://jsfiddle.net/xYDf4/

Added some styles to highlight the selection http://jsfiddle.net/xYDf4/1/

Edit: Added conditions to sync the pager and Next/Prev buttons to mark them selected 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');
});

Upvotes: 3

Venkat.R
Venkat.R

Reputation: 7746

Try this similar plugin which may achieve your task.

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

Upvotes: 0

Related Questions