Создание самого простого слайдера отзывов

Создание самого простого слайдера отзывов поможет Вашему сайту стать немного более респектабельным и не унылым. А простота его использования сделает его еще и мега доступным для тех, кто только начинает изучение web-программирования. Сразу хочу забежать вперед, в интернете существует тьма всяких слайдеров и тому подобной мишуры с кучей настроек. Здесь Вы такого не увидите, но ту работу, которую выполняет данный скрипт, он делает превосходно, и что самое главное понятно. Итак, приступим. Да, совсем забыл, не забудьте скачать демо и посмотреть, как он выглядит. Учтите, вместо фотографий можно использовать любой контент.

Создание самого простого слайдера отзывов

Итак, первым делом разложим наш скрипт по полочкам и сделаем его так, чтобы он мог работать даже в том случае, если у пользователя отключен JavaScript.

Шаг первый

Создание полноценной HTML структуры. Я буду копировать и вставлять код, который использовал непосредственно в своем проекте.

 <div id="slideshow">
  <div id="slidesContainer">
	<div class="slide">
		<div class="post_otzivy">
			Отзыв 1
		</div>
    </div>
    <div class="slide">
		<div class="post_otzivy">
			Отзыв 1
		</div>
    </div>
    <div class="slide">
		<div class="post_otzivy">
			Отзыв 1
		</div>
    </div>
  </div>
</div>
<a href="javascript:void(0);" class="control prev" id="leftControl">< Предыдущий отзыв</a>
 <a href="javascript:void(0);" class="control next" id="rightControl">Следующий отзыв ></a>

Из кода видно, что мы используем элементы контроля нашего сайта с помощью слов. Но, если Вы все это добавите на сайт, то еще ничего не будет работать. Не волнуйтесь, все это мы будем украшать с помощью скрипта, а пока код CSS, который стилизует нам весь наш код. Заметьте, какой маленький у нас получается код.

/********************************** Слайдер *************************************/
#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* разрешаем прокрутку */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; 
  height:263px;
}
/**
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width: 190px;
  color: black;
  position: relative;
  cursor: pointer;
}

Как видим из кода, нам этот слайдер отзывов, если отключен javascript, будет просто делать прокрутку наших отзывов вниз. Это очень удобно. А теперь самое вкусное, что нужно сделать нам. Это вставить наш код javascript.

Но для начала надо убедиться, что у нас подключена библиотека jQuerry. Если нет, то подключаем ее.

<script src="http://code.jquery.com/jquery-latest.js"></script>

Далее, в самом начале нашего сайта, перед закрывающимся тегом </head> вставляем вот такой код в теги <script></script>. Все комментарии указаны непосредственно в коде.

<script>
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  // Убираем прокрутку
  $('#slidesContainer').css('overflow', 'hidden');
  // Вставляем все .slides в блок #slideInner
  slides
  .wrapAll('<div id="slideInner"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
  // Устанавливаем ширину #slideInner, равную ширине всех слайдов
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  // Прячем правую стрелку при загрузке скрипта
  manageControls(currentPosition);
  // Отлавливаем клик на класс .controls
  $('.control')
    .bind('click', function(){
    // Определение новой позиции
      currentPosition = ($(this).attr('id')=='rightControl')
    ? currentPosition+1 : currentPosition-1;
      // Прячет / показывает элементы контроля
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });

// Автопрокрутка, если не нужна, то просто удалите код ниже
  var mycolslide = 1;
setInterval(function(){
	if (mycolslide < 3) { //здесь указываем количество слайдов, которые есть у нас
		currentPosition = currentPosition+1;
      	mycolslide = mycolslide + 1;
	}
      else {
      	currentPosition = 0;
      	mycolslide = 1;
    }
      // Прячет / показывает элементы контроля
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
},2000)// каждые 2 секунды будет меняться слайд
// Конец автопрокрутки

  // manageControls: показывает или скрывает стрелки в зависимости от значения currentPosition
  function manageControls(position){
    // Спрятать левую стрелку, если это левый слайд
    if(position==0){ $('#leftControl').hide() }
    else{ $('#leftControl').show() }
    // Спрятать правую стрелку, если это последний слайд
    if(position==numberOfSlides-1){ $('#rightControl').hide() }
    else{ $('#rightControl').show() }
    }
  });
</script>

Внимательно ознакомьтесь с этим кодом. Я постарался максимально его прокомментировать, но если у Вас есть вопросы, задавайте их в комментариях.