От автора: очень часто при создании веб-страниц необходимо отображать различную информацию в виде слайдера, так как слайдер значительно экономит место на странице при отображении большого количества информации и, конечно же, улучшает внешний вид. В данный момент создано огромное количество готовых скриптов, с помощью которых можно организовать слайд шоу контента на страницах сайта, поэтому в уроке Установка и настройка слайдера jQuery lightSlider мы рассмотрим функциональный и простой в использовании слайдер контента под названием JQuery lightSlider.
Установка слайдера
Итак, давайте перейдем на официальный сайт слайдера jQuery lightSlider.
Далее переходим по ссылке Download и скачиваем архив с актуальной версией слайдера. Обратите внимание, что на главной странице официального сайта присутствует инструкция по установке и настройке данного слайдера, а на странице Examples представлены различные примеры использования данного слайдера.
Для работы слайдера, обязательно необходима библиотека jQuery, потому как слайдер представляет собой плагин для этой библиотеки. Поэтому первым делом подключим ее к нашему сайту:
|
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
Скачанный архив распакуем и, переходим в полученный каталог. Компоненты слайдера располагаются в папке src, поэтому открываем данную папку и из каталога js, копируем библиотеку lightslider.js и подключаем ее к тестовой странице (предварительно добавив ее в каталог хранения скриптов JavaScript сайта):
|
1 |
<script src="js/lightslider.js"></script> |
Далее из папки css копируем файл стилей lightslider.css и так же подключаем его на нашем сайте:
|
1 |
<link rel="stylesheet" href="css/lightslider.css"/> |
Также скопируем каталог img в корень тестового сайта, в котором расположены изображения, необходимые для формирования элементов управления слайдером. На этом установка слайдера завершена.
Вывод слайдера jQuery lightSlider на экран
Слайдер jQuery lightSlider, представляет собой слайдер контента, поэтому в каждом слайде разрешается отображать абсолютно произвольное содержимое, то есть это может быть как простой текст, так и различные изображения. А значит, создадим следующую разметку для будущего слайдера:
|
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 41 42 43 44 45 46 47 48 49 50 |
<ul id="lightSlider"> <li> <div class="myslide"> <h3>Первый слайд</h3> <p>Lorem ipsum Cupidatat quis pariatur anim.</p> </div> </li> <li> <div class="myslide"> <h3>Второй слайд</h3> <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p> </div> </li> <li> <div class="myslide"> <h3>Третий слайд</h3> <p>Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.</p> </div> </li> <li> <div class="myslide"> <h3>Четвертый слайд</h3> <img src="image/banner1.jpg" /> </div> </li> <li> <div class="myslide"> <h3>Пятый слайд</h3> <img src="image/banner2.jpg" /> </div> </li> <li> <div class="myslide"> <h3>Шестой слайд</h3> <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p> </div> </li> <li> <div class="myslide"> <h3>Седьмой</h3> <p>Lorem ipsum Cupidatat quis pariatur anim.</p> </div> </li> <li> <div class="myslide"> <h3>Восьмой слайд</h3> <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p> </div> </li> </ul> |
То есть, как Вы видите, слайд — это отдельный блок, li, внутри которого можно располагать произвольное содержимое.
Далее в файл script.js, добавим следующий код:
|
1 2 3 |
jQuery(document).ready(function($) { $('#lightSlider').lightSlider(); }); |
То есть при помощи библиотеки jQuery, выбираем блок будущего слайдера, то есть блок ul с идентификатором lightSlider, и вызываем на исполнение метод lightSlider(). При этом на экране мы увидим следующее.
Базовые настройки
Теперь давайте рассмотрим базовые настройки слайдера lightSlider:
item — количество, слайдов отображаемых при на странице;
adaptiveHeight – адаптируемая высота слайдов, если данной настройке передать true, то при просмотре каждого слайда его высота будет определяться в зависимости от контента, который хранится в нем. То есть в этом случае высота каждого слайда не будет приведена к определенному значению;
slideMove – количество слайдов, перемещаемых за один клик по элементам управления;
speed – скорость выполнения анимационных эффектов при смене слайда;
slideMargin – внешний отступ между слайдами;
loop – зацикливание слайдера по кругу;
rtl – прокрутка слайдера в обратном порядке;
auto – автозапуск слайдера.
Настройки передаются в слайдер, в виде литерал-объекта.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
jQuery(document).ready(function($) { $('#lightSlider').lightSlider({ item:1, adaptiveHeight:true, slideMove:1, speed:100, slideMargin:30, loop:true, rtl:true, }); }); |
При этом на экране мы увидим следующее:
Адаптивный слайдер
При правильной настройке, слайдер lightSlider очень хорошо отображается на различных мобильных устройствах (как мобильных телефонах так и планшетах), с различным размером экрана. Давайте рассмотрим следующую группу настроек:
|
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 |
$(document).ready(function() { $("#lightSlider").lightSlider({ item:4, slideMargin:10, slideMove: 2, responsive : [ { breakpoint:800, settings: { item:3, slideMove:1, slideMargin:6, } }, { breakpoint:480, settings: { item:2, slideMove:1, slideMargin:6 } } ], }); }); |
Параметр response отвечает за настройку адаптивности слайдера. При этом данная настройка составная – то есть это массив настроек, который используется для определения групп параметров, работающих при определенном размере окна браузера. В параметре breakpoint, указывается размер окна браузера при котором будут доступны настройки из группы settings.
При этом на экране мы увидим следующее (ширина браузера 700 пикселей):
Ширина браузера менее 400 пикселей:
Интеграция с галереей изображений lightGallery
Слайдер lightSlider очень хорошо работает с галереей изображений lightGallery. Поэтому переходим по ссылке lightGallery на официальном сайте, скачиваем библиотеку галереи и аналогично подключаем необходимые файлы на странице тестового сайта.
Html – разметка, которая необходима для работы слайдера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<ul id="lightSlider"> <li data-thumb="image/th/1_th.jpg" data-src="image/1.jpg"> <img src="image/1.jpg" /> </li> <li data-thumb="image/th/2_th.jpg" data-src="image/2.jpg"> <img src="image/2.jpg" /> </li> <li data-thumb="image/th/3_th.jpg" data-src="image/3.jpg"> <img src="image/3.jpg" /> </li> <li data-thumb="image/th/4_th.jpg" data-src="image/4.jpg"> <img src="image/4.jpg" /> </li> <li data-thumb="image/th/1_th.jpg" data-src="image/1.jpg"> <img src="image/1.jpg" /> </li> <li data-thumb="image/th/2_th.jpg" data-src="image/2.jpg"> <img src="image/2.jpg" /> </li> </ul> |
То есть, опять же каждый слайд — это отдельный блок li, в атрибуте data-thumb, которого содержится путь к миниатюре изображения. В качестве контента блока, используется изображение, которое представляет собой изображение исходного размера (полного размера). Так же в атрибуте data-src, содержится полный путь к исходному изображению, который необходим для работы галереи lightGalery.
Далее добавим следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $("#lightSlider").lightSlider({ item:1, thumbItem:10, gallery: true, thumbMargin: 5, onSliderLoad: function(el) { el.lightGallery(); } }); }); |
В коде используются следующие настройки:
gallery – при передачи данному параметру TRUE слайдер контента работает как слайдер изображений;
thumbItem – количество миниатюр, отображаемых под исходным изображением;
thumbMargin – внешний отступ между миниатюрами;
onSliderLoad – параметр, который позволяет описать функцию обработчик, которая выполнится после полной загрузки слайдера на странице сайта. Функция принимает в качестве параметра переменную el – это объект выбранного элемента, который используется для работы слайдера. В коде обработчика события, используя объект el, мы вызываем метод lightGallery, который запускает в работу галерею lightGallery.
При этом на экране мы увидим следующее:
Если кликнуть по изображению полного размера – включится в работу галерея lightGallery:
События слайдера
Слайдер lightSlider помимо события onSliderLoad, поддерживает еще несколько событий, которые можно использовать для создания функций обработчиков.
|
1 2 3 4 5 6 |
onBeforeStart: function (el) {}, onSliderLoad: function (el) {}, onBeforeSlide: function (el) {}, onAfterSlide: function (el) {}, onBeforeNextSlide: function (el) {}, onBeforePrevSlide: function (el) {} |
onBeforeStart – срабатывает перед началом загрузки слайдера;
onBeforeSlide – срабатывает перед сменой слайда;
onAfterSlide – срабатывает после слайда;
onBeforeNextSlide – срабатывает перед переходом к следующему слайду;
onBeforePrevSlide – срабатывает перед переходом к предыдущему слайду.
На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!
Комментарии (8)