Установка и настройка слайдера jQuery lightSlider

Установка и настройка слайдера jQuery lightSlider

От автора: очень часто при создании веб-страниц необходимо отображать различную информацию в виде слайдера, так как слайдер значительно экономит место на странице при отображении большого количества информации и, конечно же, улучшает внешний вид. В данный момент создано огромное количество готовых скриптов, с помощью которых можно организовать слайд шоу контента на страницах сайта, поэтому в уроке Установка и настройка слайдера jQuery lightSlider мы рассмотрим функциональный и простой в использовании слайдер контента под названием JQuery lightSlider.

скачать исходникискачать урок

Установка слайдера

Итак, давайте перейдем на официальный сайт слайдера jQuery lightSlider.

JavaScript. Быстрый старт

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

Узнать подробнее

Далее переходим по ссылке Download и скачиваем архив с актуальной версией слайдера. Обратите внимание, что на главной странице официального сайта присутствует инструкция по установке и настройке данного слайдера, а на странице Examples представлены различные примеры использования данного слайдера.

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

Скачанный архив распакуем и, переходим в полученный каталог. Компоненты слайдера располагаются в папке src, поэтому открываем данную папку и из каталога js, копируем библиотеку lightslider.js и подключаем ее к тестовой странице (предварительно добавив ее в каталог хранения скриптов JavaScript сайта):

Далее из папки css копируем файл стилей lightslider.css и так же подключаем его на нашем сайте:

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

Вывод слайдера jQuery lightSlider на экран

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

То есть, как Вы видите, слайд — это отдельный блок, li, внутри которого можно располагать произвольное содержимое.
Далее в файл script.js, добавим следующий код:

То есть при помощи библиотеки jQuery, выбираем блок будущего слайдера, то есть блок ul с идентификатором lightSlider, и вызываем на исполнение метод lightSlider(). При этом на экране мы увидим следующее.

Базовые настройки

Теперь давайте рассмотрим базовые настройки слайдера lightSlider:

item — количество, слайдов отображаемых при на странице;

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

slideMove – количество слайдов, перемещаемых за один клик по элементам управления;

speed – скорость выполнения анимационных эффектов при смене слайда;

slideMargin – внешний отступ между слайдами;

loop – зацикливание слайдера по кругу;

rtl – прокрутка слайдера в обратном порядке;

auto – автозапуск слайдера.

Настройки передаются в слайдер, в виде литерал-объекта.

JavaScript. Быстрый старт

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

Узнать подробнее

При этом на экране мы увидим следующее:

Адаптивный слайдер

При правильной настройке, слайдер lightSlider очень хорошо отображается на различных мобильных устройствах (как мобильных телефонах так и планшетах), с различным размером экрана. Давайте рассмотрим следующую группу настроек:

Параметр response отвечает за настройку адаптивности слайдера. При этом данная настройка составная – то есть это массив настроек, который используется для определения групп параметров, работающих при определенном размере окна браузера. В параметре breakpoint, указывается размер окна браузера при котором будут доступны настройки из группы settings.

При этом на экране мы увидим следующее (ширина браузера 700 пикселей):

Ширина браузера менее 400 пикселей:

Интеграция с галереей изображений lightGallery

Слайдер lightSlider очень хорошо работает с галереей изображений lightGallery. Поэтому переходим по ссылке lightGallery на официальном сайте, скачиваем библиотеку галереи и аналогично подключаем необходимые файлы на странице тестового сайта.

Html – разметка, которая необходима для работы слайдера:

То есть, опять же каждый слайд — это отдельный блок li, в атрибуте data-thumb, которого содержится путь к миниатюре изображения. В качестве контента блока, используется изображение, которое представляет собой изображение исходного размера (полного размера). Так же в атрибуте data-src, содержится полный путь к исходному изображению, который необходим для работы галереи lightGalery.

Далее добавим следующий код:

В коде используются следующие настройки:

gallery – при передачи данному параметру TRUE слайдер контента работает как слайдер изображений;

thumbItem – количество миниатюр, отображаемых под исходным изображением;

thumbMargin – внешний отступ между миниатюрами;

onSliderLoad – параметр, который позволяет описать функцию обработчик, которая выполнится после полной загрузки слайдера на странице сайта. Функция принимает в качестве параметра переменную el – это объект выбранного элемента, который используется для работы слайдера. В коде обработчика события, используя объект el, мы вызываем метод lightGallery, который запускает в работу галерею lightGallery.

При этом на экране мы увидим следующее:

Если кликнуть по изображению полного размера – включится в работу галерея lightGallery:

События слайдера

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

onBeforeStart – срабатывает перед началом загрузки слайдера;

onBeforeSlide – срабатывает перед сменой слайда;

onAfterSlide – срабатывает после слайда;

onBeforeNextSlide – срабатывает перед переходом к следующему слайду;

onBeforePrevSlide – срабатывает перед переходом к предыдущему слайду.

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

JavaScript. Быстрый старт

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

Узнать подробнее

Хотите научиться делать фотогалереи как Вконтакте?

Посмотрите видео по созданию красивой фотогалареи как Вконтакте!

Смотреть

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

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

Комментарии (8)

  1. Ольга

    доброго дня, никак не подключается слайдер, поможете найти ошибку? могу отправить код?

    • Виктор Гавриленко

      Здравствуйте, Ольга!
      Технические вопросы решаются на нашем форуме. Задайте Ваш вопрос в соответствующей ветке и прикрепите архив с кодом.

  2. olga

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

  3. olga

    подскажите как настроить размеры превью слайдов?

  4. Сергей

    Здравствуйте. Подскажите как этот слайдер подключить к wordpress как по примеру http://webformyself.com/sozdanie-galerei-slajdera-na-wordpress/ я пробывал, но смог подключить атрибут data-thumb вот в этой части кода

  5. Алекс

    Подскажите, пожалуйста, как избавиться от миниатюр под изображением? Чтобы их вообще не было.

Добавить комментарий