Создаем собственный слайдер на jquery, шаг за шагом с подробным объяснением

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

Так как выбранная мной тема достаточно востребованная, а статья рассчитана на новичков, то я постарался подробно объяснить все ключевые моменты создания различных типов слайдеров своими руками, а также прикрепил реализацию простого программного кода для создания своего собственного механизма для просмотра изображений каталогов. Ну что ж, давайте приступать!

Несколько слов о полезности слайдеров

В интернете предоставлено достаточно различных готовых решений под множество задач. Это слайдеры в стиле карусели, с ручной и автоматической прокруткой, с превью фотографий каталога, с вертикальными и горизонтальными эффектами прокрутки и другими фишками. Такое разнообразие связано с популярностью данного инструмента.

Так слайдеры – это очень удобный инструмент не только для просмотра каталогов картинок и фотографий. Его используют для презентации положительных сторон компании, вставляя графический материал с текстом на слайдах.

Отлично работают слайдеры и для показа «закулисной жизни» какого-либо бизнеса. В компактной форме пользователь легко сможет ознакомиться с внешним видом, например, помещений отеля, включая номера, процесса изготовления каких-то продуктов в компании и т.д.

Полезность слайдера

Еще одним распространенным вариантом использования слайдеров является предоставление клиентам информации о новинках или действующих акциях. Обычно зайдя на сайт, посетители сразу же видят блок автоматически переключающихся слайдов с подобной информацией.

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

В этом списке я перечислил основные преимущества такого подхода:

Экономия полезного пространства на странице веб-сайтов;
Привлекающий внимание способ презентации важной информации;
Придание сайту более дорогого и оживленного вида;
Отличный вариант решения отображения альбома графических файлов.

Реализация собственного слайдера

Несмотря на огромное количество вариантов слайдеров, выложенных в сеть, достаточно часто их все равно приходиться подгонять под свои нужны, редактировать, оптимизировать и т.д. К тому же не всегда понятно, как они реализованы и часто всплывают вопросы: «А что вот это за строка такая!?», «Что выполняет этот элемент?», «Кому вообще сдался такой оператор?»…

Чтоб такого больше не было, я создал простенький, но очень удобный слайдер, код которого подробно описал и впоследствии вы сможете его улучшать, изменять и использовать на страницах своих веб-ресурсов.

Для начала создадим базовую разметку страницы и загрузим нужные фотографии.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Slider</title>
<style>
 img {
 width: 800px;
 height: 350px;
}
body{ background: #F0FFF0; }
</style>
 </head> 
 <body>
  <div class="album">
	<ul>
		<li><img src="http://jtour.by/uploads/posts/2014-10/1414766992_25.jpg" alt=""></li>
		<li><img src="http://puteshestvie-about.ru/wp-content/uploads/2011/04/Egipet-cairo.jpg" alt=""></li>
		<li><img src="http://img6.qwrt.ru/img6/2015/07/22/%D0%9F%D1%83%D1%82%D0%B5%D1%88%D0%B5%D1%81%D1%82%D0%B2%D0%B8%D1%8F-%D0%BE%D1%82%D0%B4%D1%8B%D1%85-%D1%82%D1%83%D1%80%D0%B8%D0%B7%D0%BC-%D0%B5%D0%B4%D0%B0-09160.jpg" alt=""></li>
		<li><img src="http://v-thailand.com/wp-content/uploads/2015/11/Puteshestviya-v-odinochku-820x344.jpg" alt=""></li>
	</ul>
</div>
 </body> 
</html>

Как видно, я поместил изображения в блок с ненумерованным списком, подогнал их все под один размер и сделал цветным фон.

Далее начинается самое интересное! Для начала после тайтла (<title>) необходимо подключить библиотеку jQuery. Выполняет такую операцию строка:

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

Теперь займемся непосредственно описанием стилевых правил поведения будущего слайдера. Обратите внимание, в коде разметки я создал класс с именем album. С ним в основном и работаю.

<style>
.album{ /* Задаю общие характеристики сладеру */
 position: relative;
 margin: 5% 20% 0 20%;
 width: 800px;
 height: 350px;
 overflow: hidden;
 }
 .album ul, .album li { /* Подгоняю размеры видимой области элементов списка и убираю маркер */
 list-style-type: none;
 padding: 0;
 margin: 0; 
 float: left;
 width: 800px;
 height: 350px;
 }
 .album ul { /* Для того чтобы все изображения отображались, для них нужно создать активное полотно во всю ширину. Поэтому 800px*4=3200px*/
 width: 3200px; 
}
 .album .nav {/* Описываю внешний вид навигации (она будет выглядеть как панель с кнопками радио)*/
 position: absolute;
 bottom: 16px; 
 left: 45%;
 }
 .album .nav span { /*Редактирую внешний вид каждой навигационной кнопки */
 display: block;
 margin-right:13px;
 background: #fff;
 border-radius: 9px;
 height: 16px;
 width: 16px;
 height: 16px;
 overflow: hidden;
 float: left;
 box-shadow: 1px 2px 3px #001;
 }
 .album .nav span.on { /*Изменяю фоновый цвет элемента навигации, если изображение, за которое он отвечает, отображается */
 background: #98FB98;
 }
</style>

На данном этапе написания программы можно наблюдать за веб-страницей, на которой сверху расположено первое изображение. Для того чтобы все стилевые характеристики вступили в силу, а также для того чтобы заработали переключатели, необходимо анимационные действия описать в js-коде.

Так как библиотека языка JavaScript под названием jQuery упрощает некоторые моменты написания приложений, я воспользовался и ее возможностями.

После подключения данной библиотеки добавьте ниже представленный код.

<script>
$(document).ready(function() { /*важная функция, которая запускает выполнение js-кода после полной загрузки веб-страницы */
 $(".album").each(function () { /*указываю, что обрабатываться будет каждый слайд*/
  var param = $(this);
/* append добавляет определенные параметры или контент к указанным областям. В данном случае с ее помощью создаются элементы управления*/
  $(param ).append("<div class='nav'></div>"); 
  $(param ).find("li").each(function () {
/* каждый блок навигации привязываю к индексу соответствующего по порядку изображению. Нахождение индекса происходит через $(this).index())*/
   $(param ).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); 
   $(this).addClass("album"+$(this).index());
  });
/* определяю, что активным навигационным элементом является первый по счету*/
  $(param ).find("span").first().addClass("on"); 
 });
});
function sliderJS (param, slide) { 
var b_ul = $( slide).find("ul"); 
 var b_li = $( slide).find("li.album"+param); 
var step = $(b_li).width(); 
//указываю, с какой скоростью (400) и в какую сторону перелистывать слайды
 $(b_ul).animate({marginLeft: "-"+step*param}, 400); 
}
// Создаю функцию для смены активного слайда
$(document).on("click", ".album .nav span", function() { 
/* closest получает список ближайших элементов к текущему и последовательно их «анализирует». Таким образом, нахожу блок в панели, на которых хочет переключиться пользователь */
 var s = $(this).closest(".album"); 
// отменяю активность последнего выбранного элемента
 $(s).find("span").removeClass("on"); 
// задаю текущему состояние активного
 $(this).addClass("on"); 
//получаю его индекс
 var param = $(this).attr("rel"); 
//использую вспомогательную функцию для перелистывания картинок
 sliderJS(param, s); 
 return false;
});
</script>

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

Более подробно познакомиться с прелестями библиотеки вы можете из курса Евгения Попова Javascript + jQuery для начинающих, по ссылке.

На этом у меня все. До новых встреч! Пока-пока!