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

Blueberry


Описание
Свойства

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

Подключение

Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а так же файлы js и css плагина: (их можно скачать на официальной странице):

Плагин необходимо применять к следующей конструкции:

Элемент .pager (его содержимое преобразуется в навигацию по слайдам) не обязателен, если его не будет, то плагин сгенерирует его автоматически. Если вам не нужна навигация, то вы можете выключить ее в параметре pager. Если вы хотите предать ему нужный вид, то воспользуйтесь знаниями о структуре его html-кода и задайте ему необходимый вид с помощью html и css.

Работа с Blueberry не отличается от работы с большинством других плагинов jQuery, за тем исключением, что следует вызывать его по наступлению события load у объекта windows:

Замечание: css-правила плагина не сбрасывают все настройки элементов списков. Например, в примерах выше пришлось обнулять свойство padding у ul-элементов.

Информация

Размер плагина ~8k (несжатые js+css)
Официальная страница
Кроссбраузерный (работает во всех современных браузерах)

↓  название :типы значений (значение по умолчанию)
interval:integer(5000)
Определяет период автоматического переключения слайдов. Указывается в миллисекундах.
duration:integer(500)
Определяет продолжительность эффекта переключения слайдов. Указывается в миллисекундах.
lineheight:integer(1)
Задает кратность высоты (в пикселях) у изображений галереи (см. пример «Кратная высота» выше).
hoverpause:boolean(false)
Определяет, нужно ли приостанавливать переключение слайдов при наведении на них курсора. По умолчанию — нет.
pager:boolean(true)
Если это свойство включено, то навигатор слайдов будет создан автоматически. Если свойство выключено, или есть элемент с классом pager уже существует на момент вызова Blueberry, то элементы для навигатора генерироваться не будут.

В случае, если понадобиться сделать собственное оформление навигации, можно воспользоваться знанием о требуемой html-структуре (см. раздел Описание) и организовать ее самостоятельно. Пустые span элементы нуно будет заменить на то что вам нужно в качестве элементов навигации.

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

keynav:boolean(true)
Если это свойство включено, то клавиши клавиатуры вперед, назад и пробел будут переключать слайды галереи. Установка свойства в false отключит эту особенность.