четверг, 24 октября 2013 г.

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

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


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


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


В последствии, список изображений и текстовку будем формировать из БД с помощью 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;
}


Комментариев нет:

Отправить комментарий