bxslider.js 를 이용하여 tab menu 만들기

<div class="tab-wrap">
  <div class="wrap1400">
    <ul class="tab7 trs">
      <li><a class="now" href="menu1.html">메뉴1</a></li>
      <li><a href="menu2.html">메뉴2</a></li>
      <li><a href="menu3.html">메뉴3</a></li>
      <li><a href="menu4.html">메뉴4</a></li>
      <li><a href="menu5.html">메뉴5</a></li>
      <li><a href="menu6.html">메뉴6</a></li>
      <li><a href="menu7.html">메뉴7</a></li>
    </ul>
  </div>
</div>

currentSlide = $('.tab-wrap .now').parent().index()-5; //.index() 로 하면 5 더 크게 나와서 -5
/*alert($('.tab-wrap .now').parent().index()-5);*/

$('.tab-wrap .tab7').bxSlider({
  auto: false,
  pager: false,
  minSlides: 1,
  maxSlides: 6,
  slideWidth: 120,
  responsive: false,
  controls: false,
  touchEnabled: true,
  infiniteLoop: false,
  startSlide: currentSlide,
  onSliderLoad: function(currentIndex){
    currentIndex = currentIndex+5; //위에서 5를 더해서 그런지 5 작게 나와서 +5
    /*alert(currentIndex);*/
    if (currentIndex>4){
    	$('.tab-wrap ul').addClass('trs'); //뒤에 있는 tab에 포커스가 안맞춰져서 강제로 맨뒤로
    };
  }
});

.tab-wrap ul.trs {transform: translate3d(-480px, 0px, 0px) !important;}