title: idangero.us swiper update tabs on slide swipe
body: <p>Building a mobile a mobile app demo using the idangero.us swiper:</p>
  
  <p><a href="http://www.idangero.us/sliders/swiper/" rel="nofollow">http://www.idangero.us/sliders/swiper/</a></p>
  
  <p>I've <em>almost</em> got it working the way I want, with one issue:</p>
  
  <p>When you click on one of the tabs in the menu, it changes it's class to "active" and slides to the proper slide. What I need to do is also change the tab class when a user manually swipes one of the slides. So if you swipe to the "about us" slide for example, the corresponding tab should change to active.</p>
  
  <p>There's an example of this in action here:</p>
  
  <p><a href="http://www.idangero.us/sliders/swiper/demos.php" rel="nofollow">"Tabs with Feedback"</a></p>
  
  <p>I just can't figure out how to make that work when I have two swipers on the page (one for the nav, and one for the body).</p>
  
  <p>Here's the js:</p>
  
  <pre><code>$(function(){
  //Init Navigation
  var nav = $('.swiper-nav').swiper({
  slidesPerView: 'auto',
  freeMode:true,
  freeModeFluid:true,
  onSlideClick: function(nav){
  pages.swipeTo( nav.clickedSlideIndex )
  }
  })
  
  $(".swiper-nav a").on('touchstart mousedown',function(e){
  e.preventDefault()
  $(".swiper-nav .active").removeClass('active')
  $(this).addClass('active')
  tabsSwiper.swipeTo( $(this).index() )
  })
  $(".swiper-nav a").click(function(e){
  e.preventDefault()
  })
  
  //Init Pages
  var pages = $('.swiper-pages').swiper()
  
  })
  </code></pre>
  
  <p><a href="http://jsfiddle.net/tactics/MX8W6/" rel="nofollow">Fiddle is here</a></p>
  
  <p>Thanks.</p>