slider loop

by cintia_rodrigues

HTML

<div class="mask">
       <div class="slider">
           <div class="image">1</div>
           <div class="image">2</div>
           <div class="image">3</div>
           <div class="image">4</div>
           <div class="image">5</div>
           <div class="image">1</div>
           <div class="image">2</div>
           <div class="image">3</div>
           <div class="image">4</div>
           <div class="image">5</div>
    </div>
</div>

CSS

.slider
{
    position: absolute;
}
.mask
{
    position: absolute;
    width: 250px;
    height: 50px;
    overflow:hidden;
    background-color: red;
}
.image 
{
    float: left;
    width: 50px;
    height: 50px;
    background-image: url(http://placehold.it/50x50);
}

JavaScript

$(document).ready(function(){
    $('.slider').width($('.slider .image').width() * $('.slider .image').length);
    
    animaSlider();
    
})

function animaSlider()
{
    $('.slider').animate({left: -250}, 1400, function(){
        $('.slider').css('left', 0);
        animaSlider();
    })
}