Визуальный пример работы адаптивного тач слайдера:
Быстрый старт
Для быстрой интеграции достаточно всего несколько строк:
<!DOCTYPE html> <html> <head> <!-- ... --> <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> <!-- ... --> </head> <body> <div class="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> ... </div> </body> </html>
Инициализация с помощью jQuery
Инициализируем слайдер с помощью jQuery и настраиваем его под свои нужды:
<!DOCTYPE html> <html> <head> <!-- подключаем jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- ... --> <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> $('.my-gallery').flickity({ // options cellAlign: 'left', contain: true, autoPlay: 10000, freeScroll: true, wrapAround: true, }); <!-- ... --> </head> <body> <div class="best-goods-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> ... </div> </body> </html>
Основные свойства
Свойство | По умолчанию | Описание | Пример |
---|---|---|---|
initialIndex | 0 | Индекс начального слайда | |
accessibility | true | Включение навигации с помощью клавиатуры | |
resize | true | Регулировка размера и положения при изменении размеров окна | |
draggable | Включение перетаскивания и щелчка | ||
wrapAround | false | Бесконечная прокрутка слайдера | |
autoPlay | false | Автоматически переходит к следующему слайду. При наведении курсора мыши автопереход будет выключен, и возобновляется, когда мышь будет убрана с области слайдера | |
prevNextButtons | true | Выводит кнопки предыдущие и следующие (стрелки) | |
pageDots | true | Создает для каждого слайда точку и выводит их (навигация) |
Дополнительно
Проект на github: https://github.com/metafizzy/flickity
Сайт проекта: http://flickity.metafizzy.co/
Комментарии
Хороший слайдер, вот бы еще сделать подборку таких слайдеров. Чтобы выбор был побольше
ОтветитьСлайдер классный, особенно понравилась работа на мобильных устройствах. +
ОтветитьВо втором примере, где «Инициализация с помощью jQuery» ошибка в коде, в скрипте указан селектор .my-gallery а в html нужны элемент имеет селектор .best-goods-gallery не будет ваш пример работать.
ОтветитьТак-же сам код скрипта в <head> </head> не обёрнут в <script> тоже ошибка
Ответить