Swiper: the touch slider that won't wreck your sprint

This is entry #10 of is the most complete touch slider/carousel library in the modern web ecosystem. Zero external dependencies. Official wrappers for React, Vue, Angular, and Web Components. Hardware-accelerated transitions that feel native on both iOS and Android.

We're not talking about a glorified jQuery plugin. Swiper has its own module system that you can import selectively: pagination, arrow navigation, image lazy loading, autoplay, thumbnails, parallax effects, zoom, and a dozen transition styles (fade, cube, flip, cards). All of that without dragging half a third-party library into your bundle.

The React API is declarative and pretty clean:

import { Swiper, SwiperSlide } from 'swiper/react';

// Import only the modules we need — key to keeping the bundle lean

import { Navigation, Pagination, Lazy } from 'swiper/modules';

import 'swiper/css';

import 'swiper/css/navigation';

import 'swiper/css/pagination';



function ProductCarousel({ products }) {

  return (

    <Swiper

      modules={[Navigation, Pagination, Lazy]}

      spaceBetween={16}       // space between slides in px

      slidesPerView={1.2}     // peek at the next slide — classic mobile UX pattern

      navigation                // prev/next arrows

      pagination={{ clickable: true }}

      lazy={true}              // native lazy loading — don't load images outside the viewport

      breakpoints={{

        // show more slides on desktop — responsive without extra media queries

        768: { slidesPerView: 2.5 },

        1200: { slidesPerView: 3.5 },

      }}

    >

      {products.map((p) => (

        <SwiperSlide key={p.id}>

          <img

            data-src={p.image}   // data-src for lazy loading

            className="swiper-lazy"

            alt={p.name}

          />

          <p>{p.name}</p>

        </SwiperSlide>

      ))}

    </Swiper>

  );

}

The CSS is modular too. If you're not using the scrollbar module, you don't import the scrollbar CSS. Simple as that.

Under the hood, Swiper uses transform: translate3d() and will-change to force the browser to hand off animations to the GPU. The result is that touch scrolling has real inertia — with physical deceleration that respects the OS parameters — instead of the robotic behavior you get with pure CSS or most alternatives.

The official docs live at has over 39k stars. This isn't recent hype — that consensus has been building for years.

Why it made the list

Swiper showed up in 4 independent awesome lists. When a specific UI component — not a framework, not a general-purpose library, but a slider — reaches that level of consensus, it's doing something right.

The difference between Swiper and alternatives like isn't that Swiper is objectively better at everything — Embla is noticeably lighter. The difference is that Swiper has the most complete official wrappers, the most exhaustive documentation, and multi-framework support without needing third-party adapters. If you work on a team where there are simultaneous projects in React, Vue, and Angular, having one library that behaves identically across all three is a genuine asset.

The module system matters too. Before Swiper got this right, the recurring complaint was bundle size. Today, if you import only Navigation and Pagination and nothing else, the bundle impact is much more reasonable. The ~30kb gzip figure that gets thrown around is for the full package with every effect and module included.

And — this is something I genuinely appreciate after living through some painful migrations over 30 years — the team publishes detailed changelogs and migration guides between major versions. The API changed significantly from v6 to v8 and from v8 to v11, sure, but they don't leave you to figure it out alone.

When NOT to use it

Honest first case: if your carousel has three static slides and you don't need touch, Swiper is probably overkill. That's what pure CSS with scroll-snap-type is for. Zero JavaScript, zero dependencies, native support in every modern browser:

/* A basic touch carousel with CSS only — no JS */

.carousel {

  display: flex;

  overflow-x: auto;

  scroll-snap-type: x mandatory;  /* snap to the nearest slide */

  -webkit-overflow-scrolling: touch; /* inertia on iOS */

  gap: 16px;

}



.carousel-slide {

  scroll-snap-align: start;  /* each slide snaps from the start */

  flex: 0 0 80%;             /* each slide takes up 80% of the width */

}

Second case: if performance is critical and bundle size is genuinely painful, look at . If you landed here directly and missed the rest of the series, there are posts worth checking out: the one on are solid entry points if you're interested in the tooling ecosystem beyond ML. The next post in the series follows the same criteria: a tool that appeared in multiple lists, passed the automated filter, and that I reviewed personally before writing a single word about it.

This article was originally published on juanchi.dev