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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Далее переходим по ссылке 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 – автозапуск слайдера.

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

При правильной настройке, слайдер 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 – срабатывает перед переходом к предыдущему слайду.

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

Смотреть курс

Метки: ,

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

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

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

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

  1. Ольга

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

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

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

  2. olga

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

  3. olga

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

  4. Сергей

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

  5. Алекс

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree