Что это такое?
Swiper — это бесплатный опенсорсный слайдер с поддержкой touch-жестов для мобильных устройств, с аппаратно ускоренными переходами и ощущением, близким к нативному. Он создан для мобильных сайтов, мобильных веб-приложений и нативных/гибридных приложений.
Swiper — это бесплатный опенсорсный слайдер с поддержкой touch-жестов для мобильных устройств, с аппаратно ускоренными переходами и ощущением, близким к нативному. Он создан для мобильных сайтов, мобильных веб-приложений и нативных/гибридных приложений.Это библиотека, которую я подключаю к своему веб-проекту, или готовое приложение?Это библиотека на JavaScript/TypeScript, которую вы добавляете в своё приложение, и она поддерживает tree-shaking — в итоговый бандл попадают только те модули, которые вы реально используете.
Это библиотека на JavaScript/TypeScript, которую вы добавляете в своё приложение, и она поддерживает tree-shaking — в итоговый бандл попадают только те модули, которые вы реально используете.Как подключить её к проекту?Возьмите боевые JS- и CSS-файлы из папки dist/ — в README сказано использовать только их. Чтобы попробовать вживую, запустите демо в папке playground (версии для Core, React и Vue).
Возьмите боевые JS- и CSS-файлы из папки dist/ — в README сказано использовать только их. Чтобы попробовать вживую, запустите демо в папке playground (версии для Core, React и Vue).Нужен ли jQuery или какие-то другие библиотеки?Нет — Swiper не зависит от сторонних библиотек и не требует jQuery и подобных, что делает его компактным и быстрым; при этом он спокойно уживается рядом с jQuery или Zepto в вашем стеке.
Нет — Swiper не зависит от сторонних библиотек и не требует jQuery и подобных, что делает его компактным и быстрым; при этом он спокойно уживается рядом с jQuery или Zepto в вашем стеке.Будет ли он работать в старых браузерах и на старых платформах?Не везде: Swiper ориентирован только на современные приложения и платформы и совместим не со всеми платформами — именно такая нацеленность и даёт нативные ощущения и простоту.
Не везде: Swiper ориентирован только на современные приложения и платформы и совместим не со всеми платформами — именно такая нацеленность и даёт нативные ощущения и простоту.Можно использовать его с React и Vue или только с чистым JavaScript?И так, и так — есть Core-версия для обычного HTML/JS, а также отдельные версии для React и Vue, а в playground лежат рабочие демо для каждой, чтобы вы могли скопировать готовую настройку под свой фреймворк.
И так, и так — есть Core-версия для обычного HTML/JS, а также отдельные версии для React и Vue, а в playground лежат рабочие демо для каждой, чтобы вы могли скопировать готовую настройку под свой фреймворк.Что есть в нём из коробки?Встроенные пагинация, стрелки навигации и скроллбар, а также режим цикла, автовоспроизведение, управление с клавиатуры и колесика мыши, вложенные слайдеры, навигация по истории и хэшу, брейкпоинты и поддержка доступности.
Встроенные пагинация, стрелки навигации и скроллбар, а также режим цикла, автовоспроизведение, управление с клавиатуры и колесика мыши, вложенные слайдеры, навигация по истории и хэшу, брейкпоинты и поддержка доступности.Останется ли он быстрым при сотнях слайдов с тяжёлыми картинками?Да — ленивая загрузка откладывает загрузку картинок слайда до тех пор, пока пользователь до него не долистает, а Virtual Slides держит в DOM только нужное количество слайдов на длинных слайдерах с большим контентом.
Да — ленивая загрузка откладывает загрузку картинок слайда до тех пор, пока пользователь до него не долистает, а Virtual Slides держит в DOM только нужное количество слайдов на длинных слайдерах с большим контентом.Какие эффекты переходов можно выбрать?Помимо обычной прокрутки есть эффекты Fade, Flip, 3D Cube и 3D Coverflow, а движение при touch-жесте по умолчанию повторяет палец в пропорции 1:1 — это соотношение можно настроить в параметрах.
Помимо обычной прокрутки есть эффекты Fade, Flip, 3D Cube и 3D Coverflow, а движение при touch-жесте по умолчанию повторяет палец в пропорции 1:1 — это соотношение можно настроить в параметрах.What are similar projects?vue-awesome-swiper, react-native-swiper, react-native-snap-carousel, slick, better-scroll, PhotoSwipe, react-slick, hammer.js
vue-awesome-swiper, react-native-swiper, react-native-snap-carousel, slick, better-scroll, PhotoSwipe, react-slick, hammer.js