DOCSEARCHbyAlgolia
Submit Docs

Swiper - Modern Mobile Touch Slider

website·Indexed 39 days ago

https://swiperjs.com/

A free, open-source, modern touch slider featuring hardware accelerated transitions, designed for mobile-first interfaces including cards and galleries.

Tokens
969
Snippets
3
Records
8
Agent score
24%

What's inside Swiper

  1. Overview of Swiper Touch Slider

    Swiper is a free, open-source, modern touch slider with hardware accelerated transitions (CSS3), designed for mobile websites, web apps, and native/hybrid apps. It supports React, Vue, and Web Components (Swiper Element). Key capabilities include RTL support, multi-row slides, virtual slides for performance, and accessibility (A11y module).

  2. Integrate Swiper with AI via MCP Server

    Swiper provides a Model Context Protocol (MCP) server for AI integration. The MCP endpoint is located at https://swiperjs.com/mcp and detailed documentation is available at https://swiperjs.com/swiper-mcp.

  3. Install and initialize Swiper

    Install the Swiper package via npm and initialize a basic horizontal slider with looping enabled. Ensure you import the core Swiper class and the required CSS for the slider to render correctly.
    npm install swiper
    import Swiper from 'swiper';
import 'swiper/css';

const swiper = new Swiper('.swiper', {
  direction: 'horizontal',
  loop: true,
});

  4. Implement premium Swiper effect plugins

    Advanced, production-ready effects are available via UI Initiative. These are implemented by setting the effect parameter in the Swiper configuration. Notable premium effects include:

    • Tinder Slider: effect: 'tinder' (card-style swipe interactions)
    • Shaders Slider (WebGL): effect: 'gl' (GLSL shader transitions like ripple, wave, pixelize)
    • Carousel Slider: effect: 'carousel' (infinite 3D carousel)
    • Cards Stack Slider: effect: 'cards-stack' (front/back flip transitions)
    • Shutters Slider: effect: 'shutters' (parallax blinds effect)
    • Expo Slider: effect: 'expo' (parallax and scale with grayscale side slides)
    • Panorama Slider: effect: 'panorama' (3D curved/arc effect)
    • Slicer Slider: effect: 'slicer' (image slicing transitions)
    • Material You Slider: effect: 'material' (Google Material Design M3 carousel)
    • Super Flow: effect: 'super-flow' (triangle fragment parallax scaling)
    // Example using a premium effect (requires premium plugin installation)
const swiper = new Swiper('.swiper', {
  effect: 'tinder',
});

  5. Configure built-in Swiper transition effects

    Swiper comes with several built-in transition effects that can be applied to the slider. The default effect is 'slide'.
    // Example of available built-in effects
const swiper = new Swiper('.swiper', {
  effect: 'fade', // Options: 'slide', 'fade', 'cube', 'coverflow', 'flip', 'cards', 'creative'
});

  7. Available Swiper built-in modules

    Swiper provides a rich API with over 15 built-in modules to extend functionality. Available modules include: Navigation, Pagination, Scrollbar, Autoplay, Free Mode, Grid, Manipulation, Parallax, Lazy Loading, Zoom, Keyboard, Mousewheel, Virtual Slides, Thumbs, Controller, A11y (Accessibility), History, and Hash Navigation.

  8. Choose between free and premium Swiper slider implementations

    Depending on the desired user experience, you can use built-in free effects or premium specialized sliders.

    • Tinder-like cards: Use effect: 'cards' (Free) or the Tinder Slider for swipe direction detection and tinderSwipe events (Premium).
    • Instagram Stories: Use Autoplay + Cube effect + custom CSS (Free) or the Stories Slider for built-in progress bars and video support (Premium).
    • WebGL/Shader transitions: Only available via the Shaders Slider (Premium).
    • 3D Carousels: Use Coverflow effect (Free) or Carousel/Panorama Sliders for true 3D perspective (Premium).
    • Parallax effects: Use the Parallax module (Free) or Shutters/Expo Sliders for advanced transitions (Premium).
    • Material Design: Use custom CSS (Free) or Material You Slider/Paper Onboarding (Premium).
    • E-commerce: Use Thumbs gallery demo (Free) or Fashion Slider (Premium).