<div id="wrapper">
       <div id="slider">
        <div class="inslider">
            <!-- Контейнер контента  -->
          <div class="contentholder">
            <div class="contentslider">

             <div class="content">
               <h1>Демонстрация проскальзывания конента всторону. Часть 1</h1>
               <p>Просто текст для примера. Просто текст для примера. Просто текст для примера.</p>
              </div>
               
             <div class="content">
               <h1>Демонстрация проскальзывания конента всторону. Часть 2</h1>
               <p>Просто текст для примера. Просто текст для примера. Просто текст для примера.</p>
             </div>
                
             <div class="content">
               <h1>Демонстрация проскальзывания конента всторону. Часть 3</h1>
               <p>Просто текст для примера. Просто текст для примера. Просто текст для примера.</p>
             </div>
                
             <div class="content">
               <h1>Демонстрация проскальзывания конента всторону. Часть 4</h1>
               <p>Просто текст для примера. Просто текст для примера. Просто текст для примера.</p>
             </div>
                    
            </div>
          </div>
             
            <!-- Навигация  -->
           <div class="contentnav">
             <a rel="1" href="#">1</a>
             <a rel="2" href="#">2</a>
             <a rel="3" href="#">3</a>
             <a rel="4" href="#">4</a>
        </div>
          </div>
        </div>
       </div>
</div>

body {
       background-color:#f0f0f0;
}
#wrapper {
       width:960px;
       margin-left:auto;
       margin-right:auto;
       overflow:visible;
}

#slider {
       background-color:#3a3a3a;
       position:relative;
       padding:20px;
       overflow:hidden;
       border: 1px solid #a9a9a9;
       -moz-border-radius: 7px;
          -webkit-border-radius: 7px;
       -khtml-border-radius: 7px;
}
.content {
       width:920px;
       float: left;
       position: relative;
       background-color:#FFF;
}
.inslider a {
       text-decoration:none;
}
.contentholder {
       border: 1px solid #a9a9a9;
       height:300px;
       width: 920px;
       overflow: hidden;
       position: relative;
       background-color:#FFF;
}
.contentslider {
       position: absolute;
       top: 0; left: 0;
}
.imgslider img {
       float: left;
}
.contentnav {
       position: absolute;
       bottom: 30px; left:30px;
        height:30px;
       z-index: 100;
       text-align: center;
       line-height: 30px;
       border: 1px solid #000;
       background-color: #fff;
       border: 1px solid #000;
}
.contentnav a {
       padding: 5px;
       text-decoration: none;
       color: #333;
}
.contentnav a.active {
       font-weight: bold;
       color:#FFF;
       background: #603;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="custom.js" type="text/javascript"></script>

//Ширина площади одной страницы
var contentwidth = $(>.contentholder>).width();
//Обще количество страниц
var totalcontent = $(>.content>).size();
//Общая ширина всего контента (всех страниц)
var allcontentwidth = contentwidth * totalcontent;
//Проскальзывание контента устанавливаем на ширину, которую получили выше
$(>.contentslider>).css({'width' : allcontentwidth});
//Теперь пишем новую функцию для проскальзывания и навигации
rotate = function(){
//Количество раз, на которое надо прокрутить контент
var slideid = $active.attr(>rel>) - 1;
//Устанавливаем дистанцию, на которую происходит единичная прокрутка
var slidedistance = slideid * contentwidth;
//Удаляем активный класс
$(>.contentnav a>).removeClass('active');
//Добавляем активный класс
$active.addClass('active');
//Анимация проскальзывания
$(>.contentslider>).animate({
              left: -slidedistance
          }, 500 );
};       
             
//Устанавливаем время для проведения проскальзывания
rotation = function(){
play = setInterval(function(){
//Навигация следующего слайда
$active = $('.contentnav a.active').next();
if ( $active.length === 0) {
//Перемещаемся к первому слайду в навигации
$active = $('.contentnav a:first');
}
rotate();
//Таймер устанавливаем на 5 сек
}, 5000);
};
//Запускаем функцию вращения
rotation();
$(>.contentnav a>).click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotation();
return false;
});
});