Skip to content

Swiper

A free JavaScript touch slider for mobile-friendly carousels and image galleries.

Stars
41.9k
Forks
9.6k
Licence
MIT
Language
TypeScript
Last update
7 days ago
Type
Library

What it is

Swiper is a free, open-source JavaScript library for building sliders, also called carousels, where users swipe through slides of content. The README describes it as intended for mobile websites, mobile web apps, and mobile native or hybrid apps. It includes built-in pagination, navigation arrows, scrollbars, and several transition effects.

  • Add a full-width hero image carousel with autoplay and pagination dots
  • Build a product image gallery with thumbnails controlling a main slider
  • Create a multi-row card layout that slides horizontally on phones
  • Show a long list of content with virtual slides so only some stay in the DOM

Great for

  • Front-end developers adding a swipeable slider or image gallery to a website
  • Teams building mobile web or hybrid apps that need touch-friendly carousels
  • Projects that want a slider with no required jQuery or other dependencies
  • Sites with many slides that benefit from lazy loading or virtual slides

Not ideal for

  • Projects that need support for very old browsers, since the README says Swiper focuses only on modern platforms
  • People who want a no-code tool, because it is a code library that needs JavaScript and HTML/CSS setup
  • Simple static pages where a plain CSS scroll-snap layout would be enough
Step-by-step guide: how to use SwiperInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js (version not stated in the README)

    Clone the repository

    git clone https://github.com/nolimits4web/swiper
  2. 2

    Run it

    • Clone the repository or install the package from npm
    • Follow the Get Started guide at swiperjs.com/get-started
    • Include the Swiper JS and CSS files from the dist folder or your bundler
    • Initialize a Swiper instance on a container element with slides
  3. 3

    Get the most out of it

    • Use Mutation Observer to re-initialize automatically when the DOM changes, as the README describes
    • Enable lazy loading for image-heavy slides to speed up page load
    • Use breakpoints to change slides per view across screen sizes
    • Use the two-way control feature to link multiple sliders together
    • Use the documented API to build custom pagination and navigation

Downloads

Strengths

  • Built-in features such as loop mode, autoplay, keyboard control, RTL support, and accessibility options
  • Tree-shakeable, so only the modules you import are included in your bundle, according to the README
  • Active project with 41k+ GitHub stars, an MIT license, and a recent push date

Trade-offs

  • The README says it is not compatible with all platforms and targets modern browsers only
  • The README is truncated and its install and API details are on the external docs site, so setup depth is hard to confirm from it alone
  • Repository's README includes a sponsor list with unrelated gambling sites, which is unrelated to the library itself

How it compares

ProjectStarsTypeLevelUpdatedBest for
swiper (this)41.9kLibraryintermediate7 days agoFront-end developers adding a swipeable slider or image gallery to a website
interact.js12.9kLibraryintermediate3 months agoWeb developers building drag-and-drop interfaces
framework718.8kFrameworkintermediate7 days agoDevelopers who already know HTML, CSS and JavaScript and want to build mobile-style apps
PhotoSwipe25.3kLibraryintermediate11 months agoWeb developers who want a photo gallery or lightbox on a site
vant24.4kLibrarybeginner5 days agoTeams building mobile-first web apps or H5 pages in Vue
ant-design-mobile12.1kLibraryintermediate2 months agoDevelopers building mobile-friendly web apps with React

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.