Визуальный пример работы адаптивного тач слайдера:
Быстрый старт
Для быстрой интеграции достаточно всего несколько строк:
<!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/
devreadwrite.com



Подборка адаптивных шаблонов для вашей CMS
Статьи по
Как получить и установить HTTPS сертификат на сайта

Комментарии
Хороший слайдер, вот бы еще сделать подборку таких слайдеров. Чтобы выбор был побольше
ОтветитьСлайдер классный, особенно понравилась работа на мобильных устройствах. +
ОтветитьВо втором примере, где «Инициализация с помощью jQuery» ошибка в коде, в скрипте указан селектор .my-gallery а в html нужны элемент имеет селектор .best-goods-gallery не будет ваш пример работать.
ОтветитьТак-же сам код скрипта в <head> </head> не обёрнут в <script> тоже ошибка
Ответить