What is this?
Swiper is a free open-source mobile touch slider with hardware accelerated transitions and native-like feel, made for mobile websites, mobile web apps and native/hybrid apps.
Swiper is a free open-source mobile touch slider with hardware accelerated transitions and native-like feel, made for mobile websites, mobile web apps and native/hybrid apps.Is it a library I add to my web project, or a ready-made app?It's a JavaScript/TypeScript library you add to your app, and it's tree-shakeable — only the modules you actually use get into your bundle.
It's a JavaScript/TypeScript library you add to your app, and it's tree-shakeable — only the modules you actually use get into your bundle.How do I add it to a project?Take the production JS and CSS files from the dist/ folder — the README says to use only those. To try it live, run the demos in the playground folder (Core, React and Vue versions).
Take the production JS and CSS files from the dist/ folder — the README says to use only those. To try it live, run the demos in the playground folder (Core, React and Vue versions).Does it need jQuery or any other libraries?None — Swiper is library agnostic and doesn't require jQuery or similar, which keeps it small and fast; it can safely sit alongside jQuery or Zepto in your stack.
None — Swiper is library agnostic and doesn't require jQuery or similar, which keeps it small and fast; it can safely sit alongside jQuery or Zepto in your stack.Will it run on older browsers and platforms?Not everywhere: Swiper targets modern apps and platforms only and is not compatible with all platforms — that focus is what buys the native-like experience and simplicity.
Not everywhere: Swiper targets modern apps and platforms only and is not compatible with all platforms — that focus is what buys the native-like experience and simplicity.Can I use it with React and Vue, or only vanilla JavaScript?Both — there's a Core version for plain HTML/JS plus dedicated React and Vue versions, and the playground has runnable demos of each so you can copy a working setup for your framework.
Both — there's a Core version for plain HTML/JS plus dedicated React and Vue versions, and the playground has runnable demos of each so you can copy a working setup for your framework.What does it include out of the box?Built-in pagination, navigation arrows and a scrollbar, plus loop mode, autoplay, keyboard and mousewheel control, nested sliders, history and hash navigation, breakpoints and accessibility support.
Built-in pagination, navigation arrows and a scrollbar, plus loop mode, autoplay, keyboard and mousewheel control, nested sliders, history and hash navigation, breakpoints and accessibility support.Will it stay fast with hundreds of image-heavy slides?Yes — lazy loading delays a slide's images until the user swipes to them, and Virtual Slides keeps only the required amount of slides in the DOM on long, content-heavy sliders.
Yes — lazy loading delays a slide's images until the user swipes to them, and Virtual Slides keeps only the required amount of slides in the DOM on long, content-heavy sliders.What transition effects can I pick from?Alongside plain sliding there are Fade, Flip, 3D Cube and 3D Coverflow effects, and touch movement follows your finger 1:1 by default, with the ratio configurable in settings.
Alongside plain sliding there are Fade, Flip, 3D Cube and 3D Coverflow effects, and touch movement follows your finger 1:1 by default, with the ratio configurable in settings.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