Swiper

~45kb gzipped (JS) + ~15kb CSS

Touch-friendly slider with built-in effects, pagination, and a11y.

01

See It in Action

Each demo drops Swiper behind a <ul> of slides and turns on a different effect. Try dragging, tapping the dots, or using the arrow keys.

The classic slider: drag to scroll, tap the dots or arrows, or use arrow keys. One config, zero CSS beyond defaults.

Preview
02

What is Swiper?

Swiper is a JavaScript slider library that handles touch gestures, mouse drag, keyboard navigation, and accessibility out of the box. You drop it behind an HTML list, turn on the modules you need (pagination, navigation, autoplay, effects), and you get a production-ready slider without writing animation code.

It ships with 8+ built-in effects (slide, fade, cube, coverflow, flip, cards, creative, and more) and has been the default slider for vanilla HTML projects since 2014. The bundle file includes every module in one script and one stylesheet -- drop it into a page and start building.

👆
Touch + Mouse + Keyboard
Swipe on mobile, drag with a mouse, or tab through with the keyboard. One config covers every input with built-in accessibility.
🎭
Effects Pack
Slide, fade, cube, coverflow, flip, cards, creative. Each is a single config flag -- no CSS @keyframes required.
🧩
Module System
Pagination, navigation, scrollbar, autoplay, lazy-loading, virtual slides. Turn any on with a simple option.
03

When to Use Swiper

Use when
✓ Hero image carousels on marketing and portfolio sites
✓ Product galleries (e-commerce) with thumbnails + zoom
✓ Testimonial sliders and case-study strips
✓ Mobile-first app-like paginated content
✓ Onboarding step carousels
Avoid when
✕ Static content grids that do not need sliding -- CSS grid is enough
✕ Infinite news feeds -- virtual scrolling libraries are a better fit
✕ Fully custom drag physics -- use a low-level gesture library instead
04

How Swiper Compares

Swiper vs Embla Carousel

Embla is the modern headless choice -- smaller API, no built-in styles, maximum customization. Swiper is feature-rich and ready to drop in with effects like coverflow and cube. Pick Swiper for vanilla HTML projects; pick Embla if you want to build custom UI on top.

Swiper wins at
Built-in effects (coverflow, cube, 3D), pagination + nav + scrollbar out of the box, richer defaults, huge community of vanilla examples, CSS + JS included
Embla Carousel wins at
Headless (no CSS), smaller bundle, cleaner API for custom UI, better React/Vue DX, less opinionated
Swiper vs Flickity

Flickity is GPL-3.0 licensed -- a non-starter for most commercial projects. Swiper is MIT. Unless you already have a Flickity license, there is no reason to pick it.

Swiper wins at
MIT license works anywhere, larger community, modern touch handling, more effects
Flickity wins at
Slightly smoother dragging physics in some edge cases
Swiper vs Native CSS scroll-snap

scroll-snap is a great zero-dependency choice for simple gallery scrolling. It cannot do effects like coverflow, does not include pagination dots or nav arrows, and has less consistent behavior across browsers. Use CSS for simple cases; Swiper when you need effects or a polished UI.

Swiper wins at
Built-in pagination, nav arrows, effects, thumbnail galleries, autoplay, keyboard + touch + mouse support
Native CSS scroll-snap wins at
Zero JS, native browser scrolling, smaller bundle, works offline
05

Get Started with Swiper

Terminal 
npm install swiper
Terminal 
yarn add swiper
HTML 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.js"></script>
Quick Start 
<!-- In your <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.css">

<!-- In your <body> -->
<div class="swiper my-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.js"></script>
<script>
  const swiper = new Swiper(".my-slider", {
    loop: true,
    pagination: { el: ".swiper-pagination", clickable: true },
    navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" },
    keyboard: { enabled: true }
  });
</script>