jQuery Slider

taken from: http://jsfiddle.net/roXon/tMxp5/1/

by Mayank Dixit

HTML

<div id="t">test</div>
<div id="gal">
    <div class="btn prev">prev</div><div class="btn next">next</div>
    <div id="slider">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
    </div>
</div>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none outside none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body {
    line-height: 1;
}
/**/
#gal{
    padding:25px 0px;
    background:#eee;
    position:absolute;
    left:0px;
    overflow:hidden;
    
}
#slider{
    position:absolute;
    left:0px;
}
.box {
    position: relative;
    float:left;
    background:#BFD5D5;
    box-shadow: 0px 0px 10px #000000;
    margin: 0px 25px;
    height: 250px;
    width: 350px;
    padding: 25px;
}
/*buttons*/
.btn{
    position:absolute;
    z-index:50;
    height:40px;
    padding:8px;
    top:38%;
    font-family:Impact, sans-serif;  
    font-size:23px;
    line-height:40px;
    color:#fff;
    display:inline-block;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    background:#000;
    cursor:pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */
    filter: alpha(opacity=50); /* IE 5-7 */
    -khtml-opacity: 0.5; /* Safari 1.x */
      -moz-opacity: 0.5; /* Netscape   */
           opacity: 0.5; /* Other */
}
.btn:hover{
    -ms-filter:...

JavaScript

$(function() {
   var c = 1, 
       timeOut,
       fit,
       isStopped = false, 
       boxw = $('.box').outerWidth(true),
       boxh = $('.box').outerHeight(true),
       boxn = $('.box').length;
    
    $('#slider').width(boxw*boxn);
    $('#gal, #slider').height(boxh);
    //////////////////////////////////
    function measure() {
        var winw = $(window).width();
        fit = Math.ceil(winw/boxw)-1; // math ceil -1 to get the number of COMPLETELY visible boxes
        $('#gal').width(winw);
        
        $('#t').html('Boxw='+boxw+' Boxh='+boxh+' Winw='+winw+' VisibleBoxes='+ fit);
    }
    measure();
    
    $(window).resize(function() {
        measure();
    });
    //////////////////////////////////    
    function b(){
       cc = (c === 1) ? $('.prev').hide() : $('.prev').show();
       ccc =(c >= boxn/fit) ? $('.next').hide() : $('.next').show();    
    }    
    $('.btn').hide();
    /////////////////////////////////
    
    function a(cb){ 
       $('#slider').animate({left: '-'+ (boxw*fit)*(c-1) },800, cb);
    }
    ////////////////////////////////
    function auto() {
    if(isStopped){ return };
       clearTimeout(timeOut);  
       timeOut = setTimeout(function() {
       $('.btn').hide();            
       c++;             
       if (c >= (boxn/fit)+1) {
          c = 1;
        }            
          a(function(){
             auto();
          });   
       }, 2000);
    }
    auto();
    /////////////////////////////////////////////////////////////////
        $('.next').click(function() {
           c++;
           b();
           a();
        });
        $('.prev').click(function() {
           c--;
           b();
           a();
        });
    /////////////////////////////////////////////////////////////////
    $('#gal').bind('mouseenter mouseleave', function(e) {    
       ( e.type === 'mouseenter' ) ?
       ( isStopped=true, b(), clearTimeout(timeOut) ) :
       ( isStopped=false, auto() );
    });

});