Слайдер Lory Carousel с поддержкой CSS Animation & Touch

Из всех плагинов карусели онлайн, я должен опрокинуть шляпу лори, Это такая простая концепция, но это один из самых мощных слайдеров в сети.

минимизированная версия общий объем составляет около 7 КБ, что не мало, но, безусловно, неплохо для сенсорного слайдера с каруселью.

Читайте также: имиджевые карусели в веб-дизайне – преимущества и лучшие практики

Вы можете добавить этот плагин на любой веб-сайт, так как он работает на jQuery или простой ванильной JS. Он может работать без зависимостей, что отлично подходит для совместимости.

Lory также является одним из немногих плагинов, который не ухудшается в старых браузерах. Он полностью поддерживается в IE10 +, и более старые версии могут по-прежнему запускать слайдер, без анимации и небольших дополнений.

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

Проверьте Домашняя страница Лори для исходного кода и деталей о настройке.
Начните с добавления библиотеки Lory JS в раздел заголовка вашего сайта в виде плагин jQuery или ванильная библиотека, Все версии в настоящее время размещены на Cloudflare CDN, поэтому очень легко включить копию без каких-либо загрузок.

Установив файл JavaScript, вы захотите создать неупорядоченный список HTML с содержимым слайдов, но Лори поставляется с несколькими предопределенными классами, поэтому хорошо придерживаться их модели.

Вот пример кода, взятого из основного Лори GitHub репо:

Теперь в jQuery (или обычном JS) вы можете настроить вызов функции. Это должно выглядеть примерно так:

$ ( ‘Js_slider’). Лори ({
  бесконечно: 1
});

Обратите внимание, что бесконечный вариант – это только одна из многих функций, которые вы можете настроить. И вы всегда можете изменить класс .js_slider в соответствии со своими потребностями.

При разработке с этим плагином у вас будет множество вопросов по настройке. Я очень рекомендую просмотреть документацию, которая находится в самом низу Страница GitHub,

Возможно, не лучшее место для документов, но, к счастью, они довольно маленькие. У вас есть только около 10 вариантов для настройки и, возможно, 10-12 различных событий, с которыми вы можете повозиться. Эта информация также может быть найдена в нижней части Лори сайт но гораздо проще читать на GitHub.

Обновления не так часты, но вы всегда можете написать запрос о проблеме на GitHub, если у вас возникнут проблемы. Если у вас действительно есть проблемы с кодом, вам, вероятно, будет легче их решить Переполнение стека,

В любом случае, вы можете начать работу довольно быстро, используя Cloudflare CDN и документы GitHub. И если вы ищете живую демонстрацию с проверкой кода эта запись CodePen,