Tab & Image Slider in jQuery / 제이쿼리로 탭메뉴 및 이미지 슬라이더 만들기

<ul class="tab">
   <li class="on">tab01</li>
   <li>tab02</li>
   <li>tab03</li>
</ul>


<div class="slider_wrap">
   <div class="slider">
      <ul class="inner_slider">
           <li class="slide"></li>
           <li class="slide"></li>
           <li class="slide"></li>
      </ul>
   </div>
</div>



<style>
.tab li {color:#ddd;}
.tab li.on {color:red;}
.slider_wrap {position:relative; width:960px; height:620px;}
.slider {position: relative; overflow:hidden; width:960px; height:620px;}
ul.inner_slider {position:absolute; top:0; left:0; width:2880px; height:620px; }
li.slide{position:relative; overflow:hidden; float:left; width:960px; height:620px;}
</style>


<script>
$( document ).ready(function() {

//탭 & 슬라이드 만들기
var tab=$('ul.tab > li');
var moving=$('.inner_slider');
var width=$('.slide').outerWidth()
tab.on('click',function(e){
    var tg=$(this);
    i=tg.index();
    console.log(i);
    moving.animate({left:-width*i});
    tab.removeClass('on');
    tab.eq(i).addClass('on');
 });

 });
</script>