Add a select state to pagination on auto scroll carousel

Question

I'm trying to add a select state to the pagination as it auto scrolls

EXAMPLE

jsFiddle

<h1>Swipe 2</h1>

<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 id="nav">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
</nav>

<div style='text-align:center;padding-top:20px;'>

  <button id ="mySwipePrev">prev</button> 
  <button id ="mySwipeNext">next</button>

</div>

Answer 1

Use the Callback function to set the the li selected properly.

callback: function(index, element) {
   var $Elements = $("#nav li").removeClass("selected");
   $Elements.eq(index-1).addClass("selected");
   },

DEMO Here