Slider

by aprudencio

HTML

<div class="contenedor" >
<div class="longp">
<div class="long" >
    
    <div class="sq">1</div>
    <div class="sq">2</div>
    <div class="sq">3</div>
    <div class="sq">4</div>
    <div class="sq">5</div>
    
</div>
    </div>
</div>

CSS

.sq{
    width: 200px;
    height: 200px;
   /*display:inline-block;*/
   border: 1px solid green;
    float:left;
    background-color:white;
    text-align:center;
    
}
.contenedor{
     width: 600px;
    height: 202px;
    overflow:hidden;
    border: 1px solid black;
    background-color:red;
}
.long{
    width: 1010px;
    position:relative;
    background-color:blue;
   
}.longp{
    width: 200px;
   position:relative;
   
    
}

JavaScript

var int;
$(document).ready(function(){
   //$(".long").animate({"left":"-32px"},1000);
var cant = 0;
    
   var some = function doi(){
       var w = $(".sq:first").width();
       var c = $(".sq").size();
       cant = cant - w -2;
       if(cant < -((c-1)*w))
           cant = 0
    $(".long").animate({"left": cant+"px"},500);
       
    };
    
    var setInt = function(){
        clearInterval(int);
        int = self.setInterval(some,2000);
    };
    setInt ();
    
    $(".contenedor").mouseover(function(){
    
    clearInterval(int);
    });
    $(".contenedor").mouseout(function(){
    some();
    setInt ();
    });
                  
});