Создаем слайдер изображений на странице

Больше для себя, чем для обучения других создаю эту заметку. Поэтому неподготовленному читателю наверное не будет полезен.
По задумке дизайнера, по макету которого я недавно верстал сайт, потребовался слайдер картинок на главной странице. После поисков, подходящего я не нашел, потому выкладываю свою версию.


Слайдер должен иметь следующий вид:

То есть у слайдера есть начало и конец. Информация о изображениях слайдера, текстовая часть, порядок следования лежит в базе данных и изменяется из админки.
Сначала создадим разметку. Слайдер будет состоять из отцентрованного по горизонтали  блока, блока, содержащего все необходимые картинки, блоков, содержащих надписи "далее" и "назад".
Вот структура:

В последствии, список изображений и текстовку будем формировать из БД с помощью PHP.

Для того, чтобы реализовать анимацию, подключаем JQuery. Задаем счетчик слайдов (номер текущего) и определяем их общее количество.

Привязываем JavaScript к событиям onclik кнопок перемещения:

$( document ).ready(function() {

carouselSlidesCount = $(".slides").size();

var currentClip = 1;

});

//-------------------------------- Слайдер ----------------------------------------------

function slidePrev(){

  //Показать предыдущий слайд

  //Проверяем, что слайд не первый, есть что перед ним

  if (currentClip > 1){

    $("#carousel-content").animate({left: "+=960px"}, 600, function(){

      if (currentClip == 1) $("#slide-prev-button").css({"visibility":"hidden"});

      if (currentClip < carouselSlidesCount) $("#slide-next-button").css({"visibility":"visible"});

    });

  currentClip--;

  }

}

function slideNext(){

  //Показать следующий слайд

  //Проверяем, что слайд не последний, есть что после него

    if (currentClip < carouselSlidesCount){

      $("#carousel-content").animate({left: "-=960px"}, 600, function(){

    if (currentClip == carouselSlidesCount) $("#slide-next-button").css({"visibility":"hidden"});

        if (currentClip > 1) $("#slide-prev-button").css({"visibility":"visible"});

      });

      currentClip++;

    }

}

Стили оформляем следующим образом:

#carousel{

position: relative;

height: 534px;

width: 960px;

margin: 0 auto;

overflow: hidden;

}

#carousel-content{

position: relative;

height: 534px;

width: 9600px;

top:0px;

left: 0px;

animation-duration: 4s;

-webkit-animation-duration: 4s;

-moz-animation-duration: 4s;

-o-animation-duration: 4s;

animation-delay: 0s;

-webkit-animation-delay: 0s;

-moz-animation-delay: 0s;

-o-animation-delay: 0s;

}

.slides{

margin: 0px;

padding: 0px;

position: relative;

top:0px;

float: left;

height: 534px;

width: 960px;

  /*border: solid 1px blue;*/

/*

animation-duration: 4s;

-webkit-animation-duration: 4s;

-moz-animation-duration: 4s;

-o-animation-duration: 4s;

animation-delay: 0s;

-webkit-animation-delay: 0s;

-moz-animation-delay: 0s;

-o-animation-delay: 0s;

*/

}

#slides-navy{

position: absolute;

  bottom: 0px;

width: 100%;

}

#slide-prev-button{

visibility: hidden;

position: absolute;

color: white;

font:3em Arial, Helvetica, sans-serif;

left:10px;

bottom: 10px;

}

#slide-next-button{

position: absolute;

color: white;

font:3em Arial, Helvetica, sans-serif;

right: 10px;

bottom: 10px;

}

.nav-button{

position: relative;

bottom: 35px;

margin-left: 20px;

margin-right: 20px;

text-transform: uppercase;

cursor: default;

}