Постоянно нахожусь в поиске простого, но эффективного слайдера. Здесь представлен один из вариантов.

Скрипт в подвал

<script type="text/javascript">
var slideWidth=330;
var sliderTimer;
$(function(){
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
    sliderTimer=setInterval(nextSlide,4000);
    $('.viewport').hover(function(){
        clearInterval(sliderTimer);
    },function(){
        sliderTimer=setInterval(nextSlide,4000);
    });
});
 
function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;
    if(currentSlide>=$('.slidewrapper').children().size())
    {
        currentSlide=0;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},330).data('current',currentSlide);
}
</script>

CSS

/* Стили слайдера */

.viewport{
    width: 330px;
    height: 100px;
    overflow: hidden;
    position: relative;
    float: left;
}
.slidewrapper{
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    margin: 0;
    padding: 0;    
}
.slide{
    width: 330px;
    height: 100px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

Код в сайт

<div class='viewport'>
    <ul class='slidewrapper' data-current=0>

<li class='slide'>1</li>
<li class='slide'>2</li>
<li class='slide'>3</li>

    </ul>
</div>

Пример работы

Поделиться в соц. сетях: