how to make SrcollLeft autosliding gallery
<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>
