swiper
Advanced tools
Package description
The swiper npm package is a modern touch slider with hardware accelerated transitions. It is intended for use in mobile websites, mobile web apps, and mobile native/hybrid apps. Swiper is designed to be used in a mobile environment, where touch interactions are fundamental. It provides a number of features like swiping, multiple slides per view, vertical slides, and more.
Basic Swiper
This code initializes a basic Swiper instance with horizontal direction, loop mode, pagination, navigation arrows, and a scrollbar.
import Swiper from 'swiper';
const swiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});Multiple Slides Per View
This code sets up a Swiper instance where you can have multiple slides visible at the same time, with space between the slides and clickable pagination.
import Swiper from 'swiper';
const swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});Vertical Swiper
This code snippet demonstrates how to initialize a Swiper instance that allows vertical swiping with clickable pagination.
import Swiper from 'swiper';
const swiper = new Swiper('.swiper-container', {
direction: 'vertical',
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});Slick is a jQuery plugin for creating carousels that supports multiple slides, responsive layouts, and touch events. It is similar to Swiper but relies on jQuery, which might not be ideal for modern projects that do not use jQuery.
Glide.js is a dependency-free JavaScript ES6 slider and carousel. It's lightweight, flexible and fast. Designed to slide, no less, no more. It compares to Swiper in terms of being touch-friendly and responsive, but it emphasizes simplicity and performance.
Flickity is a touch, responsive, flickable carousel library. It has features like draggable slides, group cells, and adaptive height. It is similar to Swiper but offers a different set of features and API options, focusing on being flickable and physics-based interactions.
Owl Carousel is a touch-enabled jQuery plugin that lets you create a beautiful responsive carousel slider. While it offers similar functionality to Swiper, it is built on top of jQuery, which might not be suitable for projects that aim to avoid jQuery dependencies.
Changelog
4.5.1 - Released on September 13th, 2019
slidesPerColumnFill: 'row' now considers groups (#3077)indexOf of undefined' that sometimes occurs on use of thumbnailsPageUp/PageDown keybindings.Readme
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. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers.
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.
On production use files (JS and CSS) only from dist/ folder, there will be the most stable versions, build/ folder is only for development purpose.
Swiper uses gulp to build a development (build) and production (dist) versions.
First you need to have gulp-cli which you should install globally.
$ npm install --global gulp
Then install all dependencies, in repo's root:
$ npm install
And build development version of Swiper:
$ npm run build:dev
The result is available in build/ folder.
$ npm run build:prod
Production version will available in dist/ folder.
All changes should be committed to src/ files only. Before you open an issue please review the contributing guideline.
If you are still using Swiper 3.x.x, you may find it in Swiper3 Branch
If you are still using Swiper 2.x.x or you need old browsers support, you may find it in Swiper2 Branch
FAQs
Most modern mobile touch slider and framework with hardware accelerated transitions
The npm package swiper receives a total of 1,666,648 weekly downloads. As such, swiper popularity was classified as popular.
We found that swiper demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A hospital in Mobile, Alabama, agreed to a settlement in a landmark ransomware death lawsuit, but is now reportedly reconsidering the agreement and refusing to pay.
Security News
A new report explores how advancements in LLMs are enhancing cyber threats, including polymorphic malware, personalized spearphishing, and the risk of hijacking customer service bots.
Security News
ESLint has approved an RFC that adds support for TypeScript configuration files, which is aimed at improving the developer experience and recognizing changes in the evolving JavaScript ecosystem.