Touch slider ui jquery: jQuery UI slider Touch & Drag/Drop support on Mobile devices

Swiffy Slider — адаптивная и мобильная сенсорная карусель

Swiffy Slider — адаптивная и мобильная сенсорная карусель

Сверхбыстрый и легкий слайдер и карусель

Совершенно новый подход к слайдерам и каруселям с использованием современных функций браузера.

Запустите тест маяка на этой странице и на странице примеров, просто чтобы увидеть…

3 КБ CSS. 1,2 КБ JS.

Начать Конфигуратор

На данный момент: v1.6.0 ·Документация·Примеры

  • Многофункциональный

    Поддерживает все распространенные варианты использования

    Удобная для мобильных устройств и потрясающая поддержка сенсорного ввода

    Слайд любого контента в любой структуре разметки

  • Современный CSS

    Использует сетку CSS для управления слайдами и пробелами

    Привязка прокрутки для управления сдвигом и выравниванием

    Переопределяемые переменные CSS для управления макетом

  • Настройка с использованием разметки

    Очень простая структура разметки

    Используйте любой элемент html — ul, div, button и т. д.

    Применить собственные классы и атрибуты в разметке, нет js

  • Легкий и быстрый Javascript

    Небольшой размер — < 1,5 КБ!

    Автоматическая или ручная инициализация

    Простой и удобный в использовании API — доступен ESM

  • Визуальный конфигуратор

    Простой пользовательский интерфейс для настройки ползунка

    Сразу же посмотрите и попробуйте изменения

    Поделитесь конфигурацией по ссылке

    Попробуйте конфигуратор

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

CSS и Javascript

Скопируйте и вставьте таблицу стилей и javascript

HTML

Скопируйте и вставьте приведенный ниже HTML-код в вашей разметки.

 <дел>
    <ул>
        
  • <тип кнопки="кнопка"> <тип кнопки="кнопка"> <дел> <кнопка> <кнопка> <кнопка>

    Результат

    Это все, что вам нужно, чтобы запустить слайдер! См. раздел примеров, чтобы получить представление о том, как создавать слайдеры и карусели.

    Существует много вариантов конфигурации — используйте конфигуратор, чтобы помочь вам начать работу, и просмотрите документы для всех параметров.

    О слайдере Swiffy

    Вокруг много действительно хороших слайдеров и каруселей. Большинство из них родились много лет назад. Из-за того, что было возможно в то время, они используют много javascript, прослушивателей событий и множество вещей для обработки скользящего поведения.

    Swiffy Slider — это новое начало, использующее то, что сейчас поддерживают браузеры. Все скольжение, перетаскивание, привязка и т. д. теперь являются собственным поведением браузера, а не javascript. Swiffy Slider может работать даже в простом режиме с без JS !

    Это обеспечивает непревзойденную производительность, пользовательский опыт, удобство сенсорного управления и простоту.

    В то же время он поддерживает любое устройство ввода в мире — сенсорное управление, мышь, клавиатуру, сенсорные панели, трекпады, карандаши, вспомогательные устройства, контроллеры и т. д.

    Проверка W3, 100% совместимость с WCAG, сверхвысокие баллы Google Lighthouse, совместимость с любой внешней средой и стеком разработки.

    roundSlider (бесплатный плагин jQuery)

    Что это?

    Круглый ползунок (также можно назвать Круглый ползунок , Радиальный ползунок ) — это подключаемый модуль jQuery, который позволяет пользователю выбирать значение или диапазон значений.

    Не только круглый ползунок, он поддерживает четверть, половину и пирог формы круга также.

    Почему это?

    Бродя по сети, обнаружил, что многим людям нужен идеальный слайдер с круговым путем. Но большинство из них не были удовлетворены доступными решениями, поэтому roundSlider решит эту проблему.

    Особенности

    • Не нужны изображения, только чистый код JS и CSS
    • Отличный внешний вид
    • Очень легко настраивается с помощью CSS
    • Поддерживает все анимации CSS3
    • Опора ползунка диапазона
    • Приращение линейного шага
    • Сенсорная опора
    • Подставка для клавиатуры
    • Поддержка прокрутки мыши
    • Открытый исходный код (под лицензия Массачусетского технологического института)

    Поддержка браузера

    Поскольку конструкции roundSlider основаны на некоторых стилях CSS3, таких как радиус границы, преобразование и т.