swiper README

The project's README from github.com/nolimits4web/swiper. As one markdown file: README.md.

Get Started | Documentation | Demos

Swiper

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

Features

Tree-shakeable: Only modules you use will be imported into your app's bundle.
Mobile-friendly: It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
Library Agnostic: Swiper doesn't require any JavaScript libraries like jQuery, which makes Swiper much smaller and faster. It can be safely used with libraries such as jQuery, Zepto, jQuery Mobile, etc.
1:1 Touch movement: By default, Swiper provides 1:1 touch movement interaction, but this ratio can be configured through Swiper settings.
Mutation Observer: Swiper has an option to enable Mutation Observer, with this feature Swiper will be automatically reinitialized and recalculate all required parameters if you make dynamic changes to the DOM, or in Swiper styles itself.
Rich API: Swiper comes with a very rich API. It allows creating your own pagination, navigation buttons, parallax effects and many more.
RTL: Swiper is the only slider that provides 100% RTL support with correct layout.
Multi Row Slides Layout: Swiper allows a multiple row slides layout, with a few slides per column.
Transition Effects: Fade, Flip, 3D Cube, 3D Coverflow.
Two-way Control: Swiper may be used as controller for any number of other Swipers, and even be controlled at the same time.
Full Navigation Control: Swiper comes with all required built-in navigation elements, such as Pagination, Navigation arrows and Scrollbar.
Flexbox Layout: Swiper uses modern flexbox layout for slides layout, which solves a lot of problems and time with size calculations. Such layout also allows configuring the Slides grid using pure CSS.
Most Flexible Slides Layout Grid: Swiper has a lot of parameters on initialization to make it as flexible as possible. You can control slides per view, per column, per group, space between slides, and many more.
Images Lazy Loading: Swiper Lazy Loading delays loading of images in inactive/invisible slides until the user swipes to them. Such feature could make the page load faster and improve Swiper performance.
Virtual Slides: Swiper comes with Virtual Slides feature that is great when you have a lot of slides or content-heavy/image-heavy slides so it will keep just the required amount of slides in DOM.
Loop mode
Autoplay
Keyboard control
Mousewheel control
Nested sliders
History navigation
Hash navigation
Breakpoints configuration
Accessibility (A11y)
And many more ...

Community

The Swiper community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects

Our Code of Conduct applies to all Swiper community channels.

Dist / Build

On production use files (JS and CSS) only from dist/ folder, there will be the most stable versions.

Development Build

Install all dependencies, in repo's root:


$ npm install

And build development version of Swiper:


$ npm run build

The result is available in dist/ folder.

Running demos:

All demos located in ./playground folder. There you will find Core (HTML, JS), React, Vue versions. To open demo, run:

Core: npm run core
React: npm run react
Vue: npm run vue

Production Build


$ npm run build:prod

Production version will available in dist/ folder.

Contributing

All changes should be committed to src/ files only. Before you open an issue please review the contributing guideline.

Major Roadmapped Features

Top Feature Requests (Add your own votes using the 👍 reaction)
Top Bugs 😱 (Add your own votes using the 👍 reaction)

Sponsors

Searching Database…

41.9K ·GitHub

这是什么？

Swiper 是一个免费开源的移动端触控滑动组件，带有硬件加速的过渡效果和接近原生的手感，专为移动网站、移动网页应用以及原生/混合应用打造。

它是加到我网页项目里的库，还是一个现成的应用？

它是一个添加到你应用中的 JavaScript/TypeScript 库，而且支持 tree-shaking —— 只有你真正用到的模块才会进入打包结果。

我怎么把它加到项目里？

从 dist/ 文件夹里取出用于生产的 JS 和 CSS 文件 —— README 说明只使用这些文件。想先实际体验一下，可以运行 playground 文件夹里的示例（有 Core、React 和 Vue 版本）。

它需要 jQuery 或其他库吗？

不需要 —— Swiper 不依赖任何库，也不要求 jQuery 或类似的库，所以它体积小、速度快；它可以和 jQuery 或 Zepto 安全地共存在你的技术栈里。

它在老旧的浏览器和平台上能运行吗？

不是所有地方都行：Swiper 只面向现代应用和平台，并不兼容所有平台 —— 正是这种专注换来了接近原生的体验和简洁性。

它能配合 React 和 Vue 使用吗，还是只支持原生 JavaScript？

都可以 —— 除了面向纯 HTML/JS 的 Core 版本，还有专门的 React 和 Vue 版本，playground 里每种都有可运行的示例，你可以直接复制一份适用于自己框架的可用配置。

它开箱即用都包含哪些功能？

内置分页器、前进后退箭头和滚动条，还支持循环模式、自动播放、键盘和鼠标滚轮控制、嵌套滑动、history 和 hash 导航、响应式断点以及无障碍支持。

如果有几百张以图片为主的幻灯片，它还能保持流畅吗？

能 —— 懒加载会把幻灯片的图片推迟到用户滑到那一页才加载，而在内容很长的滑动列表中，Virtual Slides 只在 DOM 里保留必需数量的幻灯片。

有哪些过渡效果可以选择？

除了普通的滑动，还有 Fade、Flip、3D Cube 和 3D Coverflow 效果；默认情况下触控移动会 1:1 跟随手指，这个比例也可以在设置里调整。

What are similar projects?

vue-awesome-swiper, react-native-swiper, react-native-snap-carousel, slick, better-scroll, PhotoSwipe, react-slick, hammer.js

Which topics is it in?

rich, a11y, slide, carousel, hybrid, gallery, mobile-web, touch, hardware, 3d, javascript-library, vue

Creator: nolimits4web
Size: 82.6 MB
Stars: 41.9K
Updated: CommitOct 16 Releasev14.3.0Sep 28
Age: 14y
Commits · 90 Days