Lory Carousel Slider Характеристики CSS Анімація і підтримка дотиків

З усіх карусель плагіни онлайн Я мушу кинути мою капелюху Лорі. Це таке проста концепція але це легко найпотужніші повзунки в Інтернеті.

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

Ви можете додати цей плагін до будь-якого веб-сайту, починаючи з нього працює на jQuery або простому ванільному JS. Він може працювати немає залежностей що чудово підходить для сумісності.

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

Вам доведеться зробіть все програмне кодування самостійно якщо ви хочете додати вміст, але це напрочуд просто. Ви можете визначити, наскільки велика буде кожна панель, як довго анімувати, і як працювати з відповідними браузерами.

Перевірте домашню сторінку Lory для вихідний код і докладніше про налаштування.

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

За допомогою встановленого файлу JavaScript потрібно створити невпорядкований список HTML з вмістом слайда, але Lory поставляється з декількома попередньо визначеними класами так що це добре дотримуйтеся своєї моделі.

Ось деякі зразок коду взяті з основного Lory GitHub repo:

Тепер у jQuery (або звичайному JS), ви можете настроїти виклик функції. Він повинен виглядати приблизно так:

 $ ('. js_slider'). lory (infinite: 1);

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

Під час розробки з цим плагіном ви можете мати багато запитань щодо налаштування. Дуже рекомендую перегляд документації яка знаходиться в самому низу сторінки GitHub.

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

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

У будь-якому випадку, ви можете розпочати досить швидко за допомогою Cloudflare CDN і документів GitHub. А якщо ви шукаєте демо з кодом перевірте цей запис CodePen.