Адаптивный слайдер Blueberry
Blueberry
Плагин Blueberry организует приятную и лаконичную галерею изображений. Главной ее особенностью является приспособленность к адаптивному дизайну: галерея подстраивается под размеры родительского элемента. Плагин не обладает большим количеством настроек и позволяет настраивать только скорость и частоту смены слайдов, включать и выключать возможность переключения с помощью клавиш клавиатуры, определять, нужно ли останавливать переключение слайдов при наведении курсора, а так же задавать кратность высоты изображений (см. пример выше).
Подключение
Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а так же файлы js и css плагина: (их можно скачать на официальной странице):
Плагин необходимо применять к следующей конструкции:
Элемент .pager (его содержимое преобразуется в навигацию по слайдам) не обязателен, если его не будет, то плагин сгенерирует его автоматически. Если вам не нужна навигация, то вы можете выключить ее в параметре pager. Если вы хотите предать ему нужный вид, то воспользуйтесь знаниями о структуре его html-кода и задайте ему необходимый вид с помощью html и css.
Работа с Blueberry не отличается от работы с большинством других плагинов jQuery, за тем исключением, что следует вызывать его по наступлению события load у объекта windows:
Замечание: css-правила плагина не сбрасывают все настройки элементов списков. Например, в примерах выше пришлось обнулять свойство padding у ul-элементов.
Информация
- Размер плагина ~8k (несжатые js+css)
- Официальная страница
- Кроссбраузерный (работает во всех современных браузерах)
В случае, если понадобиться сделать собственное оформление навигации, можно воспользоваться знанием о требуемой html-структуре (см. раздел Описание) и организовать ее самостоятельно. Пустые span элементы нуно будет заменить на то что вам нужно в качестве элементов навигации.
Если понадобиться убрать навигацию вообще, то нужно будет установить pager в false и ничего не указывать на месте элементов с навигацией.