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
3.0.1 - Released on February 13th, 2015
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 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:
$ gulp build
The result is available in build/ folder.
After you have made build:
$ gulp dist
Distributable version will available in dist/ folder.
All changes should be commited to src/ files. Swiper uses LESS for CSS compliations, and concatenated JS files (look at gulpfile.js for concat files order)
If you 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 2,030,518 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.