Визуальный пример работы адаптивного тач слайдера:

Быстрый старт

Для быстрой интеграции достаточно всего несколько строк:

<!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 Индекс начального слайда initialIndex: 2
accessibility true Включение навигации с помощью клавиатуры accessibility: false
resize true Регулировка размера и положения при изменении размеров окна resize: false
draggable Включение перетаскивания и щелчка draggable: false
wrapAround false Бесконечная прокрутка слайдера wrapAround: true
autoPlay false Автоматически переходит к следующему слайду. При наведении курсора мыши автопереход будет выключен, и возобновляется, когда мышь будет убрана с области слайдера autoPlay: 1500
prevNextButtons true Выводит кнопки предыдущие и следующие (стрелки) prevNextButtons: false
pageDots true Создает для каждого слайда точку и выводит их (навигация) pageDots: false

Дополнительно

Проект на github: https://github.com/metafizzy/flickity

Сайт проекта: http://flickity.metafizzy.co/