title: how to make SrcollLeft autosliding gallery
body: <p>i m new to jquery..i want to make an scrollLeft sliding gallery..i have done the following bit..bt it slides only once..its not sliding continuously...also i wanted to highlighted the current slide which is sliding..how can i do it..can anyone help me out please??</p>
  
  <pre><code>$(function(){
      var $thumbs= $('div.thumbs_wrapper');
      var scrollWidth= $('ul.thumbs li').width();
      var $single_Item=$('ul.thumbs li:first');
  
      singleWidth= $single_Item.outerWidth(); 
      scrollRight = singleWidth;      
  
      setInterval(function(){
          sliding();
      }, 1000);
  
  });
  
  function sliding(n){
      var $thumbs= $('div.thumbs_wrapper');
      var scrollWidth= $('ul.thumbs li').width();
      $thumbs.animate({'scrollLeft':'+=' + singleWidth}, 'slow').scrollLeft(scrollWidth-scrollRight);
      $('thumbs li a').each(function(){
          $(this).removeClass('active');
          if($(this).hasClass('imgage'+integer)){
              $(this).addClass('active');
          }
      });
  }
  </code></pre>
  
  <p>this is my html code </p>
  
  <pre><code>&lt;div class=gallery_outer&gt;
      &lt;div class="gallery_inner"&gt;
          &lt;ul class="full_img"&gt;
              &lt;li&gt;&lt;img src="fullSize_image/1.jpg"/&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="fullSize_image/2.jpg"/&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="fullSize_image/3.jpg"/&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="fullSize_image/4.jpg"/&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="fullSize_image/5.jpg"/&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="fullSize_image/6.jpg"/&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="thumbs_wrapper"&gt;        
          &lt;ul class="thumbs"&gt;
              &lt;li&gt;&lt;img src="thumbnails/1.jpg" class="image1"/&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="thumbnails/2.jpg" class="image2"/&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="thumbnails/3.jpg" class="image3"/&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="thumbnails/4.jpg" class="image4"/&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="thumbnails/5.jpg" class="image5"/&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="thumbnails/6.jpg" class="image6"/&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is my css code</p>
  
  <pre><code>.gallery_outer{
      margin:15px;
      width:390px;
      height:430px;
      border:5px solid #aaa;
      border-radius:10px;
      webkit-border-radius:10px;
      box-shadow:2px 2px 5px 3px;
      -moz-box-shadow:2px 2px 5px 3px;
      webkit-box-shadow:2px 2px 5px 3px;
  
  }
  .gallery_inner{
  
  }
  .full_img{
      margin:0;
      padding:0;
      list-style:none;
      position:relative;
      height:282px;
      width:17296px;
      overflow: hidden;
      /*left:-384px;*/
  }
  .full_img li{
      display:inline;
      float:left;
      margin-left:0 !important;
      padding:9px 8px;
      position: absolute;
      width:376px;
      height:282px;
  }
  .full_img li img{
      width:376px;
  }
  .thumbs_wrapper{
      margin:0;
      padding:0;
      height:108px;
      width:324px;
      overflow:hidden;
      float:left;
  }
  .thumbs{
      margin:0;
      padding:0;
      list-style:none;
      position:relative;
      /*width:5336px;*/
      width:668px;
      /*left:-108px;*/
  }
  .thumbs li{
      display:inline;
      float:left;
      margin-left:0 !important;
      padding:9px 8px;
      width:100px;
      height:100px;
  }
  .thumbs li img{
      width:100px;
      height:100px;
      cursor:pointer;
  }
  .active{
      border:5px solid red;
  }
  </code></pre>