Доброго времени суток, дорогие читатели текущей публикации. Сегодняшняя статья будет посвящена очень интересному и полезному материалу, описывающему слайдер на jQuery.
Так как выбранная мной тема достаточно востребованная, а статья рассчитана на новичков, то я постарался подробно объяснить все ключевые моменты создания различных типов слайдеров своими руками, а также прикрепил реализацию простого программного кода для создания своего собственного механизма для просмотра изображений каталогов. Ну что ж, давайте приступать!
Несколько слов о полезности слайдеров
В интернете предоставлено достаточно различных готовых решений под множество задач. Это слайдеры в стиле карусели, с ручной и автоматической прокруткой, с превью фотографий каталога, с вертикальными и горизонтальными эффектами прокрутки и другими фишками. Такое разнообразие связано с популярностью данного инструмента.
Так слайдеры – это очень удобный инструмент не только для просмотра каталогов картинок и фотографий. Его используют для презентации положительных сторон компании, вставляя графический материал с текстом на слайдах.
Отлично работают слайдеры и для показа «закулисной жизни» какого-либо бизнеса. В компактной форме пользователь легко сможет ознакомиться с внешним видом, например, помещений отеля, включая номера, процесса изготовления каких-то продуктов в компании и т.д.
Еще одним распространенным вариантом использования слайдеров является предоставление клиентам информации о новинках или действующих акциях. Обычно зайдя на сайт, посетители сразу же видят блок автоматически переключающихся слайдов с подобной информацией.
Это очень выгодный подход, так как большинство людей продолжают просмотр сайта и ознакомление с подробностями выгодных предложений.
В этом списке я перечислил основные преимущества такого подхода:
- Экономия полезного пространства на странице веб-сайтов;
- Привлекающий внимание способ презентации важной информации;
- Придание сайту более дорогого и оживленного вида;
- Отличный вариант решения отображения альбома графических файлов.
Реализация собственного слайдера
Несмотря на огромное количество вариантов слайдеров, выложенных в сеть, достаточно часто их все равно приходиться подгонять под свои нужны, редактировать, оптимизировать и т.д. К тому же не всегда понятно, как они реализованы и часто всплывают вопросы: «А что вот это за строка такая!?», «Что выполняет этот элемент?», «Кому вообще сдался такой оператор?»…
Чтоб такого больше не было, я создал простенький, но очень удобный слайдер, код которого подробно описал и впоследствии вы сможете его улучшать, изменять и использовать на страницах своих веб-ресурсов.
Для начала создадим базовую разметку страницы и загрузим нужные фотографии.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!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. С ним в основном и работаю.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <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 упрощает некоторые моменты написания приложений, я воспользовался и ее возможностями.
После подключения данной библиотеки добавьте ниже представленный код.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <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 для начинающих, по ссылке.
На этом у меня все. До новых встреч! Пока-пока!
С уважением, Роман Чуешов