Особенности слайдера Lory Carousel CSS-анимация и сенсорная поддержка

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

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

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

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

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

Посетите домашнюю страницу Лори для исходный код а также подробности о настройке.

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

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

Вот некоторые образец кода взяты из основного репозитория Lory GitHub:

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

 $ ('. js_slider'). lory (бесконечно: 1);

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

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

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

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

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