Jekyll One

QuickSearch

SwiperJS is a free and open-source JavaScript API that allows the creation of modern sliders supported by hardware-accelerated transitions. The sliders are intended for desktop websites, mobile (web) apps, and native or hybrid mobile environments.

The Swiper API documentation pages are based on version v11.2.1 (January 7, 2025) for the current version of J1 template (2025.x). The documentation can generally be used for all web browser-based projects that use SwiperJS for creating sliders.

The idea of providing this documentation is not to copy the original pages as duplicates. All pages are restructured and enhanced with code examples or improved by additional description texts for better readability and usability.

Introduction

The terms carousel and slider are often used synonymously, but in today’s web design, they refer to different concepts and functionalities. Carousels like sliders are components for cycling through image or text elements in an endless loop.

A carousel is a simple slide show that cycles through a series of images or text content. Both can support controls and indicators for previous/next steps. Still, carousels do not support adjustable transitions from slide to slide or automatic normalization of the dimensions of the elements displayed.

A slider is an extended form of the carousel. Sliders support a rotating, moving display that not only changes in one direction (like a carousel) but also in both directions so that the user can jump back and forth in the display of the elements.

A slider can display several elements at the same time or enable smooth navigation between different elements within the display. Sliders are more interactive and contain more than just images or text like video, audio, or other dynamic content.

Silders versus Swipers

Swipers are fully configurable sliders based on a rich Application Interface (API). The SwiperJS programming interface allows developers to create individual user interfaces (UI) for pagination, navigation, and more. Find many complex examples on the pages of the UI Initiative project.

The rich API makes SwiperJS an excellent choice for web developers, not least for a template systems like J1 Template. In the current version of the J1 Template (version 2025.x), Swipers are the default sliders and replaces the previously used carousels and sliders Owl Carousel, Slickslider, and Masterslider by their implementations based on the SwiperJS API.

What SwiperJS Apps are

SwiperJS Apps are preconfigured sliders (swipers) that use the SwiperJS API as a base and combine it with other libraries like AmplitudeJS, VideoJS, and Photoswipe to create powerful and modern slide shows to be embedded in webpages of a J1 Template based site.

SwiperJS Apps create sliders that display text, images, videos, or audio files. They can be used to create simple sliders or more complex slide shows with different type of content.

SwiperJS Apps are defined by pure configuration and do not require any programming.

Find selected examples of available Swipers on page SwiperJS Tester.

HTML Layout

A HTML Layout is required to define the slides (images) to be used by a Swiper slider. Find the HTML Layout also with the Swiper Documentation.

Base HTML Layout v1

Ut culpa sit in est harum voluptates recusandae deleniti minima sit quis pariatur ullam enim. Quo placeat totam sit. Totam blanditiis sint rerum fugiat nemo corrupti eius.

<!-- Slider main container (required) -->
<div id="gallery_id" class="swiper swiper-container">
  <!-- Slider wrapper element (required) -->
  <div class="swiper-wrapper">
    <!-- Slides (required) -->
    <div class="swiper-slide">
      <img src="<path_to>/image-1.jpg">
    </div>
    <!-- more slides -->
    <div class="swiper-slide">
      <img src="<path_to>/image-x.jpg">
    </div>
  </div> <!-- END wrapper element -->
  <!-- Sniper Pagination (optional) -->
  <div class="swiper-pagination"></div>
  <!-- Sniper Navigation (optional) -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- Sniper Scrollbar (optional)-->
  <div class="swiper-scrollbar"></div>
</div> <!-- END Main container -->

Base HTML Layout v2

Labore ratione et eos vel non repellendus. Eligendi ut placeat repellendus corporis autem. Fugiat vero illo quo dolorem quidem aliquam adipisci voluptas aliquam earum ipsum doloremque nihil.

<!-- Slider main container (required) -->
<div id="gallery_id" class="swiper swiper-container">
  <!-- Slider wrapper element (required) -->
    <ul class="swiper-wrapper">
      <!-- Slides (required) -->
      <li class="swiper-slide">
        <img src="<path_to>/image-1.jpg">
      </li>
      <!-- more slides -->
      <li class="swiper-slide">
        <img src="<path_to>/image-x.jpg">
      </li>
    </ul> <!-- END swiper-wrapper (slides) -->
  <!-- Sniper Pagination (optional) -->
  <div class="swiper-pagination"></div>
  <!-- Sniper Navigation (optional) -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- Sniper Scrollbar (optional)-->
  <div class="swiper-scrollbar"></div>
</div> <!-- END Main container -->

Extended HTML Layout

Molestiae quam vel nemo asperiores. Ipsa dolorum et labore doloribus ducimus aliquid est non accusamus nemo sed delectus quidem. Dolor voluptas aspernatur aut voluptatem dolore veniam ipsa nostrum eius ea ut.

<!-- Slider main container (required) -->
<div id="gallery_id" class="swiper swiper-container">
  <!-- Slider wrapper element (required) -->
  <ul class="swiper-wrapper">
    <!-- Slides (required) -->
    <li class="swiper-slide">
      <a href="<path_to>/image-1.jpg"
        data-pswp-width="<max_width>"
        data-pswp-height="<max_height>">
        <img src="<path_to>/image-1.jpg" alt="Image 1">
        <span class="pswp-caption-content">Caption: Image 1</span>
      </a>
    </li>
    <!-- more slides -->
    <li class="swiper-slide">
      <a href="<path_to>/image-x.jpg"
        data-pswp-width="<max_width>"
        data-pswp-height="<max_height>">
        <img src="<path_to>/image-x.jpg" alt="Image X">
        <span class="pswp-caption-content">Caption: Image X</span>
      </a>
    </li>
  </ul> <!-- END swiper-wrapper (slides) -->
  <!-- Sniper Pagination (optional) -->
  <div class="swiper-pagination"></div>
  <!-- Sniper Navigation (optional) -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- Sniper Scrollbar (optional)-->
  <div class="swiper-scrollbar"></div>
</div> <!-- END Main container -->

Initialization

When the Swiper HTML layout is in place, a initialization is reqired to create a slider (instance). Find initialization also with the Swiper Documentation.

// initialize swiper instance with options
const swiper = new Swiper(
  swiperContainer,
  parameters
);
swiperContainer

HTML Element or string (with CSS Selector) of swiper a container HTML element (required).

parameters

Object with Swiper parameters (ptional).

Example
// Initialize a slider and create a instance variable (for later access)
const swiper = new Swiper(
  '.swiper',
  {
    speed: 400,
    spaceBetween: 100
  }
);

The method new returns a reference to the initialized swiper instance.

After swiper initialization, it is possible to access to the swiper instance.

Example
// Create an instance variable
const swiper = document.querySelector('.swiper').swiper;
// Access the sliders instance (e.g. by a method) like so
swiper.slideNext();

Common Options

Find a full list of all swiper options, aka known as properties, with the Swiper Documentation and with the Parameters sections below.

The properties for a Swiper slider are extensive, covering various aspects of its behavior and appearance. Here’s a summary of the key default values.

Base Settings

Name Default Description

direction

horizontal

Slides move horizontally by default

effect

slide

Base sliding transition by default

spaceBetween

0

No space (gutters) in between the slides by default

slidesPerView

1

Only one slide visible at a time by default

initialSlide

0

First slide active initially by default

centeredSlides

`false

Active slide not centered by default

loop

false

Continuous looping disabled by default

User Interaction

Name Default Description

allowTouchMove

true

Swiping enabled by default

grabCursor

false

Cursor doesn’t change on hover by default

keyboard

false

Keyboard navigation disabled by default

mousewheel

false`

Mousewheel navigation disabled by default

pagination

no default

Pagination Elements (like bullets) disabled by default

navigation

no default

Navigation buttons disabled by default

scrollbar

no default

Scrollbar disabled by default

Appearance

Name Default Description

autoHeight

false

Slider height doesn’t adjust to slide content by default

speed

300

Transition animation duration between slides in ms.

Page control

Name Default Description

breakpoints

no default

No responsive breakpoints defined by default

Options A - K

List of available Swiper parameters (properties) alphabetically ordered from A to K. Find parameter settings also with the Swiper Documentation.

a11y (Accessibility)

Enable and configure the Accessibility (a11y) module with default settings. By using the module, SwiperJS slider accessibility is significantly enhanced for users having disabilities.

Find all available configurable settings with Accessibility (a11y) in section Modules.
Name Type Default Description | Example

a11y

any

no default

Object with a11y parameters or boolean true to enable the module with default settings.

const swiper = new Swiper('#swiper_id', {
  a11y: {
    prevSlideMessage:   'Go to previous slide',
    nextSlideMessage:   'Go to next slide',
    firstSlideMessage:  'This is the first slide',
    lastSlideMessage:   'This is the last slide'
  }
});

allowslideNext()

Enable or disable swiping to next slide.

Name Type Default Description | Example

allowslideNext()

boolean

true

Set to false to disable swiping to next slide direction (to right or bottom).

allowslidePrev()

Enable or disable swiping to previous slide.

Name Type Default Description | Example

allowslidePrev()

boolean

true

Set to false to disable swiping to previous slide direction (to left or top).

allowTouchMove

Control to switch slides by using API methods like slidePrev() or slideNext().

Name Type Default Description | Example

allowTouchMove

boolean

true

If false, then the only way to switch the slide is use of API methods like slidePrev() or slideNext().

autoHeight

Set the slider wrapper to adapt its height from the height of the currently active slide.

Name Type Default Description | Example

autoHeight

boolean

false

Set to true and slider wrapper will adapt its height to the height of the currently active slide.

autoplay

Enable and configure the Autoplay module for auto playing behaviour of a SwiperJS slider.

Find all available configurable settings with Autoplay in section hModules>>.
Name Type Default Description | Example

autoplay

any

no default

Object with autoplay parameters or boolean true to enable with default settings.

const swiper = new Swiper('#swiper_id', {
  autoplay: {
    delay: 5000
  }
});

breakpoints

Allows to set parameters for responsive breakpoints.

Name Type Default Description | Example

breakpoints

object

no default

Allows to set different parameter for different responsive breakpoints (screen sizes). Not all parameters can be changed in breakpoints, only those which do not require different layout and logic, like slidesPerView, slidesPerGroup, spaceBetween, grid.rows.

Parameters like loop and effect won’t work.

 
const swiper = new Swiper('#swiper_id', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
});
const swiper = new Swiper('#swiper_id', {
  slidesPerView: 1,
  spaceBetween: 10,
  // using "ratio" endpoints
  breakpoints: {
    '@0.75': {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    '@1.00': {
      slidesPerView: 3,
      spaceBetween: 40,
    },
    '@1.50': {
      slidesPerView: 4,
      spaceBetween: 50,
    }
  }
});

breakpointsBase

Specify the base for breakpoints.

Name Type Default Description | Example

breakpointsBase

any

window

Base for breakpoints. Can be window or container. If set to window (by default) then breakpoint keys mean window width. If set to container then breakpoint keys treated as swiper container width.

cardsEffect

Specify Cards-effect parameters.

Name Type Default Description | Example

cardsEffect

any

no default

Object with Cards-effect parameters.

const swiper = new Swiper('#swiper_id', {
  effect: 'cards',
  cardsEffect: {
    // ...
  }
});

centerInsufficientSlides

Enabe or disable to center slides.

Name Type Default Description | Example

centerInsufficientSlides

boolean

false

When enabled it center slides if the amount of slides less than slidesPerView.

Not intended to be used in loop mode and grid.rows.

centeredSlides

Control to center active slides.

Name Type Default Description | Example

centeredSlides

boolean

false

If true, then active slide will be centered, not always on the left side.

centeredSlidesBounds

Control to center active slides without adding gaps.

Not intended to be used with loop or pagination.
Name Type Default Description | Example

centeredSlidesBounds

boolean

false

If true, then active slide will be centered without adding gaps at the beginning and end of slider.

Required: centeredSlides: true.

Not intended to be used with loop or pagination.

containerModifierClass

The beginning of the modifier CSS class to center slides.

Name Type Default Description | Example

containerModifierClass

string

swiper-

The beginning of the modifier CSS class that can be added to swiper container depending on different parameters.

controller

The Controller module allows to synchronize the movement of multiple slider instances. Find below how to set Swiper controller parameters.

Find all available configurable settings with Controller in section Modules.
Name Type Default Description | Example

controller

any

no default

Object with controller parameters or boolean true to enable with default settings.

const swiper = new Swiper('#swiper_id', {
  controller: {
    inverse: true
  }
});

coverflowEffect

The Coverflow Effect module for SwiperJS creates a three-dimensional, fan-like effect for the slides in a Swiper container. This effect is inspired by the Coverflow view that you can see, for example, when selecting albums in iTunes.

Find below how to set Coverflow Effect parameters.

Table 1. Coverflow Effect Example
Name Type Default Description | Example

coverflowEffect

any

no default

Object with Coverflow-effect parameters.

const swiper = new Swiper('#swiper_id', {
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 30,
    slideShadows: false
  }
});

createElements

Control how to wrap slides by an swiper-wrapper element.

Table 2. createElements Example
Name Type Default Description | Example

createElements

boolean

false

When enabled, Swiper will automatically wrap slides with swiper-wrapper element, and will create required elements for navigation, pagination and scrollbar they are enabled (with their respective params object or with boolean true).

creativeEffect

The creative effect module in SwiperJS generates creative and engaging visual effects for the slides in a Swiper. The module allows for various custom transformations to animate the slides dynamically as they transition between each slide.

Name Type Default Description | Example

creativeEffect

any

no default

Object with Creative-effect parameters

const swiper = new Swiper('#swiper_id', {
  effect: 'creative',
  creativeEffect: {
    prev: {
      // will set `translateZ(-400px)` on previous slides
      translate: [0, 0, -400],
    },
    next: {
      // will set `translateX(100%)` on next slides
      translate: ['100%', 0, 0],
    }
  }
});

cssMode

Enable or disable CSS Scroll Snap API.

Name Type Default Description | Example

cssMode

boolean

false

When enabled, Swiper will use modern CSS Scroll Snap API. It doesn’t support all of Swiper’s features, but potentially should bring a much better performance in simple configurations.

This is what is not supported when it is enabled:

  • Cube effect

  • Parameter speed may not have no effect

  • All transition start|end related events. Use slideChange instead

  • Parameter slidesPerGroup has limited support

  • Parameter simulateTouch doesn’t have effect and "dragging" with mouse doesn’t work

  • Parameter resistance doesn’t have any effect

  • Parameter allowslidePrev()/Next

  • Parameter swipeHandler

In case if you use it with other effects, especially 3D effects, it is required to wrap slide’s content with a <div className="swiper-slide-transform"> element. And if you use any custom styles on slides (like background colors, border radius, border, etc.), they should be set on swiper-slide-transform element instead.

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- wrap slide content with transform element -->
      <div class="swiper-slide-transform">
        ... slide content ...
      </div>
    </div>
    ...
  </div>
</div>
<script>
  const swiper = new Swiper('#swiper_id', {
    effect: 'flip',
    cssMode: true
  });
</script>

cubeEffect

Set cube effect parameters.

Name Type Default Description | Example

cubeEffect

any

no default

Object with Cube-effect parameters

const swiper = new Swiper('#swiper_id', {
  effect: 'cube',
  cubeEffect: {
    slideShadows: false
  }
});

direction

Set the direction for Swipoer sliders.

Name Type Default Description | Example

direction

horizontal | vertical

horizontal

Can be horizontal or vertical for vertical sliders.

edgeSwipeDetection

Name Type Default Description | Example

edgeSwipeDetection

string | boolean

false

Enable to release Swiper events for swipe-back work in app. If set to prevent (string) then it will prevent system swipe-back navigation instead. This feature works only with touch events (not pointer events), so it will work on iOS/Android devices and won’t work on Windows devices with pointer (touch) events.

edgeSwipeThreshold

Area (in px) from left edge of the screen to release touch events.

Name Type Default Description | Example

edgeSwipeThreshold

number

20

Area (in px) from left edge of the screen to release touch events for swipe-back in app.

effect

Set slide transition effects.

Name Type Default Description | Example

effect

string

slide

Transition effect. Can be slide, fade, cube, coverflow, flip, creative or cards.

enabled

Control if a Swiper slideshow is initially enabled.

Name Type Default Description | Example

enabled

boolean

true

Whether Swiper initially enabled. When Swiper is disabled, it will hide all navigation elements and won’t respond to any events and interactions.

eventsPrefix

Cntrol event name prefix for all Swiper DOM events.

Name Type Default Description | Example

eventsPrefix

string

swiper

Event name prefix for all DOM events emitted by Swiper Element.

fadeEffect

The Fade Effect module in SwiperJS creates a smooth transition between each slide. Instead of sliding or sliding the slides like other effects do, the transition causes them to fade out and the next slide to fade in.

Find all available configurable settings with Fade Effect in section Modules.

Find below how to set Fade effect parameters.

Name Type Default Description | Example

fadeEffect

any

no default

The Fade Effect module in SwiperJS creates a smooth transition between each slide. Instead of sliding or sliding the slides like other effects do, the transition causes them to fade out and the next slide to fade in.

const swiper = new Swiper('#swiper_id', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  }
});

flipEffect

The Flip Effect module in SwiperJS creates a special transition effect between individual slides. It gives the impression that the slides are being turned like cards.

Find all available configurable settings with Flip Effect in section Modules.

Find below how to set Flip effect parameters.

Name Type Default Description | Example

flipEffect

any

no default

Object with Flip-effect parameters

const swiper = new Swiper('#swiper_id', {
  effect: 'flip',
  flipEffect: {
    slideShadows: false
  }
});

focusableElements

Set CSS selector for focusable elements.

Name Type Default Description | Example

focusableElements

string

input | select | option | textarea | button | video | label

CSS selector for focusable elements. Swiping will be disabled on such elements if they are focused.

followFinger

Set slider animated only when you release it.

Name Type Default Description | Example

followFinger

boolean

true

If disabled, then slider will be animated only when you release it, it will not move while you hold your finger on it.

freeMode

The Free Mode module gives users a more fluid and interactive sliding experience.

Find all available configurable settings with Free Mode in section Modules.

Find below how to set Free Mode parameters.

Table 3. Free Mode Example
Name Type Default Description | Example

freeMode

any

no default

Enables free mode functionality. Object with free mode parameters or boolean true to enable with default settings.

const swiper = new Swiper('#swiper_id', {
  freeMode: true
});
const swiper = new Swiper('#swiper_id', {
  freeMode: {
    enabled: true,
    sticky: true
  },
});

grabCursor

Improve desktop usability by setting the grab cursor when hover on Swiper.

Name Type Default Description | Example

grabCursor

boolean

false

This option may a little improve desktop usability. If true, user will see the grab cursor when hover on Swiper.

grid

The Grid module in SwiperJS allows to create multi-row sliders, effectively arranging slides into a grid-like structure.

Find all available configurable settings with Grid in section [Mdules].

Find below how to set Grid parameters to enable a multirow slider.

Name Type Default Description | Example

grid

any

no default

Object with grid parameters to enable multirow slider.

const swiper = new Swiper('#swiper_id', {
  grid: {
    rows: 2
  }
});

hashNavigation

Hash navigation is intended to have a link to specific slide that allows to load a page with specific slide opened.

Find below how to set Hash Navigation parameters.

Name Type Default Description | Example

hashNavigation

any

no default

Enables hash url navigation for slides. Object with hash navigation parameters or boolean true to enable with default settings.

const swiper = new Swiper('#swiper_id', {
  hashNavigation: {
    replaceState: true
  }
});

height

Force Swiper height.

Name Type Default Description | Example

height

null | number

null

Swiper height (in px). Parameter allows to force Swiper height. Useful only if you initialize Swiper when it is hidden and in SSR and Test environments for correct Swiper initialization

Setting this parameter will make Swiper not responsive.

history

The History (Navigation) module in SwiperJS allows you to integrate Swiper with history of the browser. This means, when users navigate between slides in a Swiper, the browser’s URL will be updated to reflect the current slide.

Find all available configurable settings with History Navigation in section [Mdules].

Find below how to set History Navigation parameters.

Name Type Default Description | Example

history

any

no default

Enables history push state where every slide will have its own url. In this parameter you have to specify main slides url like slides and specify every slide url using data-history attribute.

Object with history navigation parameters or boolean true to enable with default settings.

const swiper = new Swiper('#swiper_id', {
  history: {
    replaceState: true
  }
});
<!-- will produce "slides/slide1" url in browser history -->
<div class="swiper-slide" data-history="slide1"></div>

init

Specify, if Swiper should be initialised automatically.

Name Type Default Description | Example

init

boolean

true

Whether Swiper should be initialised automatically when you create an instance. If disabled, then you need to init it manually by calling swiper.init().

initialSlide

Set the index number of the initial slide.

Name Type Default Description | Example

initialSlide

number

0

Index number of the initial slide.

injectStyles

Inject text styles to the shadow DOM.

Name Type Default Description | Example

injectStyles

string[]

no default

Inject text styles to the shadow DOM. Only for usage with Swiper Element.

injectStylesUrls

Inject styles `<link>`s to the shadow DOM.

Name Type Default Description | Example

injectStylesUrls

string[]

no default

Inject styles `<link>`s to the shadow DOM. Only for usage with Swiper Element.

keyboard

The Keyboard (Control module) in SwiperJS enables navigation through slides using the keyboard.

Find all available configurable settings with Keyboard Control in section [Mdules].

Find below how to set Keyboard Control parameters, to enable or disable the navigation through slides using keyboard.

Table 4. Keyboard Control Example
Name Type Default Description | Example

keyboard

any

no default

Enables navigation through slides using keyboard. Object with keyboard parameters or boolean true to enable with default settings.

const swiper = new Swiper('#swiper_id', {
  keyboard: {
    enabled: true,
    onlyInViewport: false
  }
});

Options L - O

List of available Swiper parameters (properties) alphabetically ordered from L to O. Find parameter settings also with the Swiper Documentation.

Lazy Loading

The Lazy Loading module in SwiperJS controls the lazy loading of images within a swiper. Lazy loading means images are not loaded until they scroll into the browser’s visible area. Using the module increases loading speed, especially for websites with many images, and thus improves the user experience.

Find all available configurable settings with Lazy Loading in section [Mdules].

Find the available options for lazy loading below.

lazyPreloadPrevNext

Number of next and previous slides to be preloaded.

Name Type Default Description

lazyPreloadPrevNext

number

0

Number of next and previous slides to preload. Only applicable if using lazy loading.

lazyPreloaderClass

Set CSS class name of lazy preloader.

Name Type Default Description

lazyPreloaderClass

string

swiper-lazy-preloader

CSS class name of lazy preloader.

longSwipes

Enable or disable long swipes.

Name Type Default Description

longSwipes

boolean

true

Set to false if you want to disable long swipes.

longSwipesMs

Set the minimal duration (in ms) to trigger long swipes.

Name Type Default Description

longSwipesMs

number

300

Minimal duration (in ms) to trigger swipe to next/previous slide during long swipes.

longSwipesRatio

Set the ratio to trigger swipe to next/previous slide during long swipes.

Name Type Default Description

longSwipesRatio

number

0.5

Ratio to trigger swipe to next/previous slide during long swipes.

loop

Enable or disable continuous loop mode.

Name Type Default Description

loop

boolean

false

Set to true to enable continuous loop mode.

Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be:

  • more than or equal to lidesPerView + slidesPerGroup

  • even to slidesPerGroup (or use loopAddBlankSlides parameter)

  • even to grid.rows (or use loopAddBlankSlides parameter)

loopAddBlankSlides

Add blank slides if you use Grid or slidesPerGroup on total amount of slides is not even to slidesPerGroup.

Name Type Default Description

loopAddBlankSlides

boolean

true

Automatically adds blank slides if you use Grid or slidesPerGroup and the total amount of slides is not even to slidesPerGroup or to grid.rows.

loopAdditionalSlides

Allows to increase amount of looped slides.

Name Type Default Description

loopAdditionalSlides

number

0

Allows to increase amount of looped slides.

loopPreventsSliding

Set slideNext \| slidePrev to do nothing while slider is animating in loop mode.

Name Type Default Description

loopPreventsSliding

boolean

true

If enabled then slideNext/Prev will do nothing while slider is animating in loop mode.

maxBackfaceHiddenSlides

Reduce visual flicker in Apple’s Safari Browser.

Name Type Default Description

maxBackfaceHiddenSlides

number

10

If total number of slides less than specified here value, then Swiper will enable backface-visibility: hidden on slide elements to reduce visual flicker in Safari Browser.

It is not recommended to enable on large amount of slides as it will reduce performance.

mousewheel

The Mousewheel Control module in SwiperJS enables users to navigate through the slides of a SwiperJS instance using their mouse wheel.

Find all available configurable settings with Mousewheel Control in section [Mdules].

Find the available options for mousewheel control below to enables or disable navigation through slides using mouse wheel.

Name Type Default Description

mousewheel

any

no defaults

Enables navigation through slides using mouse wheel. Object with mousewheel parameters or boolean true to enable with default settings.

const swiper = new Swiper('#swiper_id', {
  mousewheel: {
    invert: true
  }
});

navigation

The Pagination module in SwiperJS is a powerful tool that allows you to add visual indicators (like buttons) to a SwiperJS slide. The navigation elements make it clear to users how many slides there are and which slide they are currently viewing.

Find all available configurable settings with Navigation in section [Mdules].

Find the available options for navigation below to enable and configure the navigation (module).

Name Type Default Description

navigation

any

no defaults

Object with navigation parameters or boolean true to enable with default settings.

const swiper = new Swiper('#swiper_id', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  }
});

nested

Control Swiper for correct touch events interception.

Name Type Default Description

nested

boolean

false

Set to true on Swiper for correct touch events interception. Use only on swipers that use same direction as the parent one.

noSwiping

Control no swiping on elements specified by (CSS) noSwipingClass.

Name Type Default Description

noSwiping

boolean

true

Enable/disable swiping on elements matched to class specified in noSwipingClass.

noSwipingClass

Specify (CSS) elements to disable swiping on.

Name Type Default Description

noSwipingClass

string

swiper-no-swiping

Specify noSwiping element css class.

noSwipingSelector

Specify (CSS) elements to disable swiping on.

Name Type Default Description

noSwipingSelector

string

no defaults

Can be used instead of noSwipingClass to specify elements to disable swiping on. For example input will disable swiping on all inputs.

normalizeSlideIndex

Normalize slide index.

Name Type Default Description

normalizeSlideIndex

boolean

true

Normalize slide index.

observeParents

Configure to watch Mutations for Swiper parent elements.

Name Type Default Description

observeParents

boolean

false

Set to true if you also need to watch Mutations for Swiper parent elements.

observeSlideChildren

Configure to watch Mutations for Swiper slide child elements.

Name Type Default Description

observeSlideChildren

boolean

false

Set to true if you also need to watch Mutations for Swiper slide child elements.

observer

Enable a Mutation Observer on Swiper and its elements.

Name Type Default Description

observer

boolean

false

Set to true to enable a Mutation Observer on Swiper and its elements. In this case Swiper will be updated (reinitialized) each time if you change its style (like hide/show) or modify its child elements (like adding/removing slides).

on

Register event handlers.

Name Type Default Description

on

object

no defaults

Register event handlers.

const swiper = new Swiper('#swiper_id', {
  swiper.on('click', function (swiper, event) {
    // do something
  }
});

onAny

Register event handlers on all events.

Name Type Default Description

onAny

function(handler)

no defaults

Add event listener that will be fired on all events.

const swiper = new Swiper('#swiper_id', {
  onAny(eventName, ...args) {
    console.log('Event: ', eventName);
    console.log('Event data: ', args);
  }
});

oneWayMovement

Configure swipe slides only forward (one-way) regardless of swipe direction.

Name Type Default Description

'oneWayMovement'

boolean

false

When enabled, will swipe slides only forward (one-way) regardless of swipe direction.

Options P - S

List of available Swiper parameters (properties) alphabetically ordered from P to S. Find parameter settings also with the Swiper Documentation.

pagination

The Pagination module in SwiperJS is a powerful tool that allows you to add visual indicators (like buttons) to a SwiperJS slide. The navigation elements make it clear to users how many slides there are and which slide they are currently viewing.

Find all available configurable settings with Pagination in section Modules.

Find below an example how to configure the Pagination module for a SwiperJS slider.

Name Type Default Description

pagination

any

no defaults

Object with pagination parameters or boolean true to enable with default settings.

const swiper = new Swiper('#swiper_id', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  },
});

parallax

The Parallax module supports parallax transition effects for SwiperJS silder slides and nested elements.

Find all available configurable settings with Parallax in section Modules.

Configure parallax effect for a swipe slider.

Name Type Default Description

parallax

any

no defaults

Object with parallax parameters or boolean true to enable with default settings.

const swiper = new Swiper('#swiper_id', {
  parallax: true
});

passiveListeners

Configure passive event listeners.

Name Type Default Description

passiveListeners

boolean

true

Passive event listeners will be used by default where possible to improve scrolling performance on mobile devices. But if you need to use e.preventDefault and you have conflict with it, then you should disable this parameter.

preventClicks

Prevent unwanted clicks on links during swiping.

Name Type Default Description

preventClicks

boolean

true

Set to true to prevent accidental unwanted clicks on links during swiping.

preventClicksPropagation

Stop click event propagation on links during swiping.

Name Type Default Description

preventClicksPropagation

boolean

true

Set to true to stop clicks event propagation on links during swiping.

preventInteractionOnTransition

Allow to change slides by swiping or navigation \| pagination buttons during transition.

Name Type Default Description

preventInteractionOnTransition

boolean

false

When enabled it won’t allow to change slides by swiping or navigation/pagination buttons during transition.

resistance

Enable or disable resistant bounds.

Name Type Default Description

resistance

boolean

true

Set to false if you want to disable resistant bounds

resistanceRatio

Control resistance ratio.

Name Type Default Description

resistanceRatio

number

0.85

This option allows you to control resistance ratio.

resizeObserver

Configure ResizeObserver (if supported by browser) on swiper container to detect container resize.

Name Type Default Description

resizeObserver

boolean

true

When enabled it will use ResizeObserver (if supported by browser) on swiper container to detect container resize (instead of watching for window resize).

rewind

Enable rewind mode.

Name Type Default Description

rewind

boolean

false

Set to true to enable rewind mode. When enabled, clicking next navigation button (or calling .slideNext()) when on last slide will slide back to the first slide. Clicking prev navigation button (or calling .slidePrev()) when on first slide will slide forward to the last slide.

Should not be used together with loop mode.

roundLengths

Enable to round values of slides width and height to prevent blurry texts on usual resolution screens.

Name Type Default Description

roundLengths

boolean

false

Set to true to round values of slides width and height to prevent blurry texts on usual resolution screens (if you have such).

runCallbacksOnInit

Fire Transition \| SlideChange \| Start \| End events on swiper initialization.

Name Type Default Description

runCallbacksOnInit

boolean

true

Fire Transition | SlideChange | Start | End events on swiper initialization. Such events will be fired on initialization in case of your initialSlide is not 0, or you use loop mode.

scrollbar

The Scrollbar module in SwiperJS is a powerful tool that enhances user interaction and provides visual feedback within a SwiperJS slider.

Find all available configurable settings with Scrollbar in section [Mdules].

Find below how to configure scrollbar parameters to enable with default settings.

Name Type Default Description

scrollbar

any

no defaults

Object with scrollbar parameters or boolean true to enable with default settings.

const swiper = new Swiper('#swiper_id', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true
  }
});

setWrapperSize

Set width \| height on swiper wrapper.

Name Type Default Description

setWrapperSize

boolean

false

Enabled this option and plugin will set width | height on swiper wrapper equal to total size of all slides. Mostly should be used as compatibility fallback option for browser that don’t support flexbox layout well.

shortSwipes

Disable short swipes.

Name Type Default Description

shortSwipes

boolean

true

Set to false if you want to disable short swipes.

simulateTouch

Enable or disable Swiper mouse events like touch events.

Name Type Default Description

simulateTouch

boolean

true

If true, Swiper will accept mouse events like touch events (click and drag to change slides).

slideActiveClass

Set CSS class name of the active slide.

Name Type Default Description

slideActiveClass

string

swiper-slide-active

CSS class name of currently active slide.

By changing classes you will also need to change Swiper’s CSS to reflect changed classes.

Not supported in Swiper React and Vue environments.

slideBlankClass

Configre CSS class name blank slides.

Name Type Default Description

slideBlankClass

string

swiper-slide-blank

CSS class name of the blank slide added by the loop mode when loopAddBlankSlides is enabled.

Not supported in Swiper React and Vue environments.

slideClass

Configre CSS class name for blank slides.

Name Type Default Description

slideClass

string

swiper-slide

CSS class name of swiper slides.

By changing classes you will also need to change Swiper’s CSS to reflect changed classes.

*Not supported *in Swiper React and Vue environments.

slideFullyVisibleClass

Configre CSS class name for blank slides.

Name Type Default Description

slideFullyVisibleClass

string

swiper-slide-fully-visible

CSS class name of fully (when whole slide is in the viewport) visible slide.

*Not supported *in Swiper React and Vue environments.

slideNextClass

Configre CSS class name of the slide which is right after the active slide.

Name Type Default Description

slideNextClass

string

swiper-slide-next

CSS class name of slide which is right after currently active slide.

By changing classes you will also need to change Swiper’s CSS to reflect changed classes.

Not supported in Swiper React and Vue environments.

slidePrevClass

Configre CSS class name of the slide which is right before the active slide.

Name Type Default Description

slidePrevClass

string

swiper-slide-prev

CSS class name of slide which is right before currently active slide.

By changing classes you will also need to change Swiper’s CSS to reflect changed classes

Not supported in Swiper React and Vue environments.

slideToClickedSlide

Enable click on any slide to trigger a transition.

Name Type Default Description

slideToClickedSlide

boolean

false

Set to true to enable click on any slide to trigger a transition.

slideVisibleClass

Set the CSS class name of the currently active or partially visible slide.

Name Type Default Description

slideVisibleClass

string

swiper-slide-visible

CSS class name of the currently active or partially visible slide.

By changing classes you will also need to change Swiper’s CSS to reflect changed classes.

Not supported in Swiper React and Vue environments.

slidesOffsetAfter

Set additional slide offset (in px) at the end of the container after all slides configured.

Name Type Default Description

slidesOffsetAfter

number

0

Add additional slide offset (in px) at the end of the container after all slides configured.

slidesOffsetBefore

Set additional slide offset (in px) in the beginning of the container before all slides configured.

Name Type Default Description

slidesOffsetBefore

number

0

Add (in px) additional slide offset (in px) in the beginning of the container before all slides configured.

slidesPerGroup

Set numbers of slides for group sliding.

Name Type Default Description

slidesPerGroup

number

1

Set numbers of slides for group sliding. Useful to use with slidesPerView Parameter set larger than 1.

slidesPerGroupAuto

Set number of slides for group sliding to skip all slides in view on .slideNext() \| .slidePrev() methods calls, on Navigation button clicks in autoplay.

Name Type Default Description

slidesPerGroupAuto

boolean

false

This param intended to be used only with slidesPerView: auto and slidesPerGroup: 1. When enabled, it will skip all slides in view on .slideNext() | .slidePrev() methods calls, on Navigation button clicks in autoplay.

slidesPerGroupSkip

Set number of slides for group sliding to skip slides.

Name Type Default Description

slidesPerGroupSkip

number

0

The parameter works in the following way: If slidesPerGroupSkip equals 0 (default), no slides are excluded from grouping, and the resulting behaviour is the same as without this change.

If slidesPerGroupSkip is equal or larger than 1 the first X slides are treated as single groups, whereas all following slides are grouped by the slidesPerGroup value.

slidesPerView

Set the number of slides visible per view on a slider.

Name Type Default Description

slidesPerView

number | auto

1

Number of slides visible per view on a slider.

Setting slidesPerView: auto is not compatible with multirow mode, when grid.row is set larger than 1.

spaceBetween

Set Gutters (space) in between the slides in px.

Name Type Default Description

spaceBetween

string | number

0

Set Gutters (space) in between the slides in px.

If you use margin CSS property to the elements which go into Swiper in which you pass spaceBetween into, navigation might not work properly.

speed

Set Duration of transition between slides in ms.

Name Type Default Description

speed

number

300

Duration of transition between slides in ms.

swipeHandler

Set the CSS selector \| HTML element for swiping of the the swiper container.

Name Type Default Description

swipeHandler

any

null

String with CSS selector | HTML element for swiping of the the swiper container.

swiperElementNodeName

Set the name of the swiper element node name.

Name Type Default Description

swiperElementNodeName

string

swiper-container

The name of the swiper element node name. Used for detecting web component rendering.

Options T - Z

List of available Swiper parameters (properties) alphabetically ordered from T to Z. Find parameter settings also with the Swiper Documentation.

threshold

Set the threshold value in px then swiper will not move.

Name Type Default Description

threshold

number

5

Threshold value in px. If touch distance will be lower than this value then swiper will not move.

thumbs

The Thumbs module enables to create a thumbnail navigation for SliderJS sliders.

Find all available configurable settings with Thumbs in section [Mdules].

Find below how to enable the thumbs module and set the thumbs parameters.

Name Type Default Description

thumbs

any

no defaults

Object with thumbs component parameters for thumb image navigation.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  thumbs: {
    swiper: thumbsSwiper
  }
});

touchAngle

Set Angle in degrees to trigger touch move.

Name Type Default Description

touchAngle

number

45

Angle in degrees to trigger touch move.

touchEventsTarget

Set the target element to listen on touch events.

Name Type Default Description

touchEventsTarget

container | wrapper

wrapper

Target element to listen on touch events. Can be container to listen for touch events on the swiper container or wrapper to listen for touch events on the swiper wrapper.

touchMoveStopPropagation

Enable to stop the propagation of touchmove.

Name Type Default Description

touchMoveStopPropagation

boolean

false

If enabled, then propagation of touchmove will be stopped.

touchRatio

Set the touch ratio.

Name Type Default Description

touchRatio

number

1

Touch ratio

touchReleaseOnEdges

Enable touch events on slider edge positions for page scrolling.

Name Type Default Description

touchReleaseOnEdges

boolean

false

Enable to release touch events on slider edge position (beginning, end) to allow for further page scrolling.

This feature works only with touch events (and not pointer events), so it will work on iOS * or *Android devices (mobiles) and not work on Windows (desktp) devices with pointer events.

Also threshold parameter must be set to 0.

touchStartForcePreventDefault

Force to prevent default for touchstart or pointerdown events.

Name Type Default Description

touchStartForcePreventDefault

boolean

false

Force to prevent default for touchstart | pointerdown events.

touchStartPreventDefault

Enable prevent default for touchstart or pointerdown events.

Name Type Default Description

touchStartPreventDefault

boolean

true

If set false (disabled), pointerdown events are not prevented by default.

uniqueNavElements

Disable navigation element parameters passed as a string like .pagination.

Name Type Default Description

uniqueNavElements

boolean

true

When enabled (by default) and navigation element parameters passed as a string (like `.pagination) then Swiper will look for such elements through child elements first. Applies for pagination, prev | next buttons and scrollbar elements.

updateOnWindowResize

Disable the recalculation of slide positions on window resize for desktops or orientation change on mobiles.

Name Type Default Description

updateOnWindowResize

boolean

true

Swiper will recalculate slides position on window resize (desktops) or orientation change (on mobiles).

url

Required for active slide detection when rendered on server-side and history enabled.

Name Type Default Description

url

null | string

null

Required for active slide detection when rendered on server-side and history enabled.

userAgent

Setting the userAgent string is required for browser or device detection when swiper is rendered on server-side.

Name Type Default Description

userAgent

null | string

null

userAgent string. Required for browser | device detection when swiper is rendered on server-side.

virtual

The Virtual Slides module allows you to keep the required number of slides in the DOM. The module is very useful in terms of performance and memory issues if you have a lot of slides, especially slides with heavyweight DOM trees or images.

Find all available configurable settings with Virtual Slides in section [Mdules].

Find below how to enable and configures the virtual slides functionality.

Name Type Default Description

'virtual'

any

no defaults

Enables virtual slides functionality. Object with virtual slides parameters or boolean true to enable with default settings.

const swiper = new Swiper('#swiper_id', {
  virtual: {
    slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5']
  }
});

virtualTranslate

Useful when you need to create custom slide transitions.

Name Type Default Description

virtualTranslate

boolean

false

If enabled, the swiper will be operated as usual, but will not move and real CSS3 transform translate values on wrapper will not be set.

Useful when you need to create custom slide transitions.

watchOverflow

When enabled, the swiper will be disabled and hide navigation buttons in case there are not enough slides for sliding.

Name Type Default Description

watchOverflow

boolean

true

When enabled, Swiper will be disabled and hide navigation buttons in case there are not enough slides for sliding.

watchSlidesProgress

When enabled, the swiper will be disabled and hide navigation buttons in case there are not enough slides for sliding.

Name Type Default Description

watchSlidesProgress

boolean

false

Enable this feature to calculate each slides progress and visibility.

Slides in viewport will have an additional visible class.

width

Force the swiper width (in px).

Name Type Default Description

width

null | number

null

Parameter allows to force the swiper width (in px).

Useful only if you initialize Swiper when it is hidden and in Test environments for correct Swiper initialization.

Setting this parameter will make Swiper not responsive.

wrapperClass

Set the CSS class name of the slides wrapper.

Name Type Default Description

wrapperClass

string

swiper-wrapper

CSS class name of the slides wrapper.

By changing classes, you will also need to change Swiper’s CSS to reflect changed classes.

Not supported for swipers in React and Vue environments.

zoom

Enables zooming functionality.

Name Type Default Description

zoom

any

no defaults

Enables zooming functionality. Object with zoom parameters or boolean true to enable with default settings

const swiper = new Swiper('#swiper_id', {
  zoom: {
    maxRatio: 5
  }
});

Instance Properties A - M

After slider initialization, the instance variable comes with helpful properties (slider parameters) set. See the the const swiper (variable) in the examples from above.

List of available Swiper parameters (properties) alphabetically ordered from A to M. Find parameter settings also with the Swiper Documentation.

activeIndex

Index number of the active slide.

Name Type Description

activeIndex

number

Index number of the active slide.

In loop mode, the value of activeIndex will be increased by the number of slides looped.

allowSlideNext

Set the ability on sliding to the next slides by assigning false \| true to this property.

Name Type Description

allowSlideNext

boolean

Disable | Enable ability to slide to the next slides by assigning false | true to this property.

allowSlidePrev

Set the ability on sliding to the previous slides by assigning false \| true to this property.

Name Type Description

allowSlidePrev

boolean

Disable | Enable ability to slide to the previous slides by assigning false | true to this property.

allowTouchMove

Set the ability move slider by grabbing it with mouse or by touching it with finger (on touch screens) by assigning false \| true to this property.

Name Type Description

allowTouchMove

boolean

Disable | Enable ability move slider by grabbing it with mouse or by touching it with finger (on touch screens) by assigning false | true to this property.

animating

Is set to true if swiper is in transition.

Name Type Description

animating

boolean

Is set to true if swiper is in transition.

animating

Is set to true if swiper is in transition.

Name Type Description

autoplay

any

Set auto playing behaviour for a slide show.

cardsEffect

Object with Cards-effect parameters.

Name Type Description

cardsEffect

any

Object with Cards-effect parameters.

clickedIndex

Index number of last clicked slide.

Name Type Description

'clickedIndex'

number

Index number of last clicked slide.

clickedSlide

Link to last clicked slide (HTML Element).

Name Type Description

clickedSlide

HTML Element

Link to last clicked slide (HTML Element).

controller

Object with controller parameters or boolean true to enable with default settings.

Name Type Description

controller

any

Object with controller parameters or boolean true to enable with default settings.

coverflowEffect

Object with Coverflow-effect parameters.

Name Type Description `

coverflowEffect `

any

Object with Coverflow-effect parameters.

creativeEffect

Object with Creative-effect parameters.

Name Type Description

creativeEffect

any

Object with Creative-effect parameters.

cubeEffect

Object with Cube-effect parameters.

Name Type Description

cubeEffect

any

Object with Cube-effect parameters.

defaults

Object with Swiper default options.

Name Type Description

defaults

any

Swiper default options.

el

Contains the Slider container HTML element.

Name Type Description

el

HTML Element

Slider container HTML element.

extendedDefaults

Object with global Swiper extended options.

Name Type Description

extendedDefaults

any

Object with global Swiper extended options.

fadeEffect

Object with Fade-effect parameters.

Name Type Description

fadeEffect

any

Object with Fade-effect parameters.

flipEffect

Object with Flip-effect parameters.

Name Type Description

flipEffect

any

Object with Flip-effect parameters.

freeMode

Object with free mode parameters or boolean true if enabled with default settings.

Name Type Description

freeMode

any

Object with free mode parameters or boolean true if enabled with default settings.

hashNavigation

Object with hash navigation parameters or boolean true if enabled with default settings.

Name Type Description

hashNavigation

any

Object with hash navigation parameters or boolean true if enabled with default settings.

height

Is set to the height of the swiper container.

Name Type Description

height

number

Is set to the height of the swiper container.

history

Object with history parameters.

Name Type Description

history

any

Object with history parameters.

isBeginning

Is set to true if slider on most left|top position.

Name Type Description

isBeginning

boolean

Is set to true if slider on most left|top position.

isEnd

Is set to true if slider on most right/bottom position.

Name Type Description

isEnd

boolean

Is set to true if slider on most right/bottom position.

isLocked

Is set to true if slide is locked (watchOverflow) and slides can not be accessed, e.g. when amount of slides is less than slides per view.

Name Type Description

isLocked

boolean

Is set to true if slide is locked (watchOverflow) and slides can not be accessed, e.g. when amount of slides is less than slides per view.

keyboard

Object with keyboard parameters or boolean true if enabled with default settings.

Name Type Description

keyboard

any

Object with keyboard parameters or boolean true if enabled with default settings.

mousewheel

Object with mousewheel parameters or boolean true ìf enabled with default settings.

Name Type Description

mousewheel

any

Object with mousewheel parameters or boolean true ìf enabled with default settings.

Instance Properties N - Z

After slider initialization, the instance variable comes with helpful properties (slider parameters) set. See the the const swiper (variable) in the examples from above.

List of available Swiper parameters (properties) alphabetically ordered from N to Z. Find parameter settings also with the Swiper Documentation.

navigation

Object with navigation parameters or boolean true if enabled with default settings.

Name Type Description

navigation

any

Object with navigation parameters or boolean true if enabled with default settings.

originalParams

Object with original initialization parameters

Name Type Description

originalParams

any

Object with original initialization parameters

pagination

Object with pagination parameters or boolean true if enabled with default settings.

Name Type Description

pagination

any

Object with pagination parameters or boolean true if enabled with default settings.

parallax

Object with parallax parameters or boolean true if enabled with default settings.

Name Type Description

parallax

any

Object with parallax parameters or boolean true if enabled with default settings.

params

Object with passed initialization parameters.

Name Type Description

params

any

Object with passed initialization parameters.

previousIndex

Is set to index number of previously active slide.

Name Type Description

previousIndex

number

Is set to index number of previously active slide.

progress

Current progress of wrapper translate (from 0 to 1).

Name Type Description

progress

number

Current progress of wrapper translate (from 0 to 1).

realIndex

Index number of currently active slide considering rearranged slides in loop mode.

Name Type Description

realIndex

number

Index number of currently active slide considering rearranged slides in loop mode.

scrollbar

Object with scrollbar parameters or boolean true if enabled with default settings.

Name Type Description

scrollbar

any

Object with scrollbar parameters or boolean true if enabled with default settings.

slides

Array of slides HTML elements. To get specific slide HTML Element use swiper.slides[1]

Name Type Description

slides

HTML Element[]

Array of slides HTML elements. To get specific slide HTML Element use swiper.slides[1]

slidesEl

Swiper wrapper HTML element.

Name Type Description

slidesEl

HTML Element

Swiper wrapper HTML element.

slidesGrid

Array of slides grid elements.

Name Type Description

slidesGrid

number[]

Array of slides grid elements.

slidesSizesGrid

Array of widths for all slides elements.

Name Type Description

slidesSizesGrid

number[]

Array of widths for all slides elements.

snapGrid

Array of all slides snap grid elements.

Name Type Description

snapGrid

number[]

Array of all slides snap grid elements.

snapIndex

Index number of current snap in snapGrid.

Name Type Description

snapIndex

number

Index number of current snap in snapGrid.

swipeDirection

Strings that reflect the direction of sliding.

Name Type Description

swipeDirection

prev | next

Strings that reflect the direction of sliding.

thumbs

Object with thumbs component parameters for thumb image navigation.

Name Type Description

thumbs

any

Object with thumbs component parameters for thumb image navigation.

touches

Object with touch event properties.

Name Type Description

touches

object

Object with the following touch event properties:

  • touches.startX

  • touches.startY

  • touches.currentX

  • touches.currentY

  • touches.diff

translate

Is set to current value of wrapper translate.

Name Type Description

translate

number

Is set to current value of wrapper translate.

virtual

Object with virtual slides settings.

Name Type Description

virtual

any

Object with virtual slides settings.

width

Set to width of the swiper container.

Name Type Description

width

number

Set to width of the swiper container.

wrapperEl

Swiper wrapper HTML element.

Name Type Description

wrapperEl

HTML Element

Swiper wrapper HTML element.

zoom

Object with zoom parameters or boolean true if enabled with default settings.

Name Type Description

zoom

any

Object with zoom parameters or boolean true if enabled with default settings.

Modules

SwiperJS modules are extensions that extend the functionality of the core SwiperJS system. They offer additional and advanced features and customization options beyond the basic functions of SwiperJS sliders.

Find available SwiperJS module descriptions also with the Swiper Documentation.
Additional features

Modules can be used when navigation, pagination, a scroll bar, or an effect, such as a zoom effect, is required. A suitable module already exists for many additional functions.

Customizatiion

Modules allow detailed customization of a slideshow’s look and behavior and enable the adaptation of sliders to individual needs.

For using SwiperJS in the web browser or for J1 template projects, all modules are already integrated* into the JS and CSS resources as bundle versions and can be used immediately.

It is advisable to configure only the required modules to keep the code and configuration of a SwiperJS slider compact and clear.
Table 5. Available Modules for SwiperJS
Name Description | Example

Accessibility (a11y)

Enable and configure Accessibility (a11y) module features of SwiperJS available for screen readers and other assistive technologies.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  a11y: {
    prevSlideMessage:   'Go to previous slide',
    nextSlideMessage:   'Go to next slide',
    firstSlideMessage:  'This is the first slide',
    lastSlideMessage:   'This is the last slide'
  }
});

Controller

The Controller module allows to synchronize the movement of multiple slider instances.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  controller: {
    inverse: true
  }
});

Cards Effect

The Cards Effect module in SwiperJS adds a visually appealing, card-like sliding animation for transitions between slides in a SwiperJS slider instance.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  effect: 'cards',
  cardsEffect: {
    // ...
  }
});

Coverflow Effect

The Coverflow Effect module for SwiperJS creates a three-dimensional, fan-like effect for the slides in a Swiper container. This effect is inspired by the Coverflow view that you can see, for example, when selecting albums in iTunes.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 30,
    slideShadows: false
  }
});

Creative Effect

The creative effect module in SwiperJS generates creative and engaging visual effects for the slides in a Swiper. The module allows for various custom transformations to animate the slides dynamically as they transition between each slide.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  effect: 'creative',
  creativeEffect: {
    prev: {
      // will set `translateZ(-400px)` on previous slides
      translate: [0, 0, -400],
    },
    next: {
      // will set `translateX(100%)` on next slides
      translate: ['100%', 0, 0],
    }
  }
});

Cube Effect

The Cube Effect module in SwiperJS adds a 3D cube-like rotation effect to the transitions between slides in a SwiperJS slider instance.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  effect: 'cube',
  cubeEffect: {
    slideShadows: false
  }
});

Fade Effect

The Fade Effect module in SwiperJS creates a smooth transition between each slide. Instead of sliding or sliding the slides like other effects do, the transition causes them to fade out and the next slide to fade in.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  }
});

Flip Effect

The Flip Effect module in SwiperJS creates a special transition effect between individual slides. It gives the impression that the slides are being turned like cards.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  effect: 'flip',
  flipEffect: {
    slideShadows: false
  }
});

Free Mode

The Free Mode module gives users a more fluid and interactive sliding experience.

const swiper = new Swiper('#swiper_id', {
  grid: {
    rows: 2
  }
});

Grid

The Grid module in SwiperJS allows to create multi-row sliders, effectively arranging slides into a grid-like structure.

const swiper = new Swiper('#swiper_id', {
  grid: {
    rows: 2
  }
});

Hash Navigation

Hash navigation is intended to have a link to specific slide that allows to load a page with specific slide opened.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  hashNavigation: {
    replaceState: true
  }
});

History Navigation

The History (Navigation) module in SwiperJS allows you to integrate Swiper with history of the browser. This means, when users navigate between slides in a Swiper, the browser’s URL will be updated to reflect the current slide.

Object with history navigation parameters or boolean true to enable with default settings.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  history: {
    replaceState: true
  }
});

Keyboard Control

The Keyboard Control module in SwiperJS enables navigation through slides using the keyboard.

const swiper = new Swiper('#swiper_id', {
  keyboard: {
    enabled: true,
    onlyInViewport: false
  }
});

Lazy Loading

The Lazy Loading module in SwiperJS controls the lazy loading of images within a swiper. Lazy loading means images are not loaded until they scroll into the browser’s visible area. Using the module increases loading speed, especially for websites with many images, and thus improves the user experience.

Manipulation

The Manipulation module adds useful methods to SwiperJS for manipulating slides. The module provides methods for dynamically adding, removing, and rearranging slides within a SwiperJS slider.

Mousewheel Control

The Mousewheel Control module in SwiperJS enables users to navigate through the slides of a SwiperJS instance using their mouse wheel.

const swiper = new Swiper('#swiper_id', {
  mousewheel: {
    invert: true
  }
});

Pagination

The Pagination module in SwiperJS is a powerful tool for adding visual indicators (like buttons) to a SwiperJS slide. The navigation elements make it clear to users how many slides they view and which ones they view.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  }
});

Parallax

The Parallax module supports parallax transition effects for SwiperJS silder slides and nested elements.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  parallax: true
});

Scrollbar

The Scrollbar module in SwiperJS is a powerful tool that enhances user interaction and provides visual feedback within a SwiperJS slider.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true
  }
});

Thumbs

The Thumbs module enables to create a thumbnail navigation for SliderJS sliders.

const swiper = new Swiper('#swiper_id', {
  // other parameters ...
  thumbs: {
    swiper: thumbsSwiper
  }
});

Virtual Slides

The Virtual Slides module allows you to keep the required number of slides in the DOM. The module is very useful in terms of performance and memory issues if you have a lot of slides, especially slides with heavyweight DOM trees or images.

const swiper = new Swiper('#swiper_id', {
  virtual: {
    slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5']
  }
});

Accessibility (a11y)

Enable and configure Accessibility (a11y) module features of SwiperJS available for screen readers and other assistive technologies. By using the parameter and its options, you can significantly enhance the accessibility for users with disabilities:

Keyboard Navigation

Enables users to navigate slides using keyboard arrows.

Screen Reader Support

Provides meaningful information to screen readers about the slider, such as the number of slides and the current slide.

Customizable Messages

Allows you to provide custom messages for screen readers, improving user experience.

Parameters

Find all parameters available for the Accessibility (a11y) module.

Table 6. Accessibility (a11y) Parameters
Name Type Default Description | Example

containerMessage

null | string

null

Message for screen readers for outer swiper container.

containerRole

null | string

null

Value of the role attribute to be set on the swiper container.

containerRoleDescriptionMessage

null | string

null

Message for screen readers describing the role of outer swiper container.

enabled

boolean

true

Enables the Accessibility Module (a11y).

firstSlideMessage

string

This is the first slide

Message for screen readers for previous button when swiper is on first slide.

id

null | string | number

null

Value of the id attribute to be set on swiper-wrapper. If set to null the id will be generated automatically.

itemRoleDescriptionMessage

null | string

null

Message for screen readers describing the role of a slide element.

lastSlideMessage

string

This is the last slide

Message for screen readers for next button when swiper is on last slide.

nextSlideMessage

string

Next slide

Message for screen readers for the next button.

notificationClass

string

swiper-notification

CSS class name of A11y notification.

paginationBulletMessage

string

Go to slide {{index}}

Message for screen readers for single pagination bullet.

prevSlideMessage

string

Previous slide

Message for screen readers for the previous button.

scrollOnFocus

boolean

true

Enables scrolling to the slide that has been focused.

slideLabelMessage

string

{{index}} | {{slidesLength}}

Message for screen readers describing the label of the slide element.

slideRole

string

group

Value of swiper slide role attribute.

Autoplay

The Autoplay module in SwiperJS is a powerful feature that allows you to automatically transition between slides in your slider at a specified interval. Here’s a breakdown of its key functionalities:

Automatic Slide Transitions

The primary function is to automatically move the slider to the next slide after a defined delay.

Customization

You can extensively customize the autoplay behavior:

  • Delay: Control the time interval between each slide transition.

  • Disable on Interaction: Stop autoplay when the user interacts with the slider (e.g., swiping, clicking).

  • Reverse Direction: Change the direction of autoplay (from right to left or vice versa).

  • Disable on Interaction: Stop autoplay when the user interacts with the slider.

Parameters

Find all Parameters available for the Autoplay module.

Table 7. Autoplay Parameters
Name Type Default Description | Example

delay

number

3000

Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled.

If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute individually on each slide.

<!-- hold this slide for 2 seconds -->
<div class="swiper-slide" data-swiper-autoplay="2000">

disableOnInteraction

boolean

true

Set to false and autoplay will not be disabled after user interactions (swiping). It will be restarted every time after interaction.

pauseOnMouseEnter

boolean

false

When enabled, autoplay will be paused on pointer (mouse) enter over Swiper container.

reverseDirection

boolean

false

Enables autoplay in reverse direction.

stopOnLastSlide

boolean

false

Enable this parameter and autoplay is stopped when the last slide is reached.

This setting has no effect in loop mode.

waitForTransition

boolean

true

When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transitions.

Properties

Find all Properties available for the Autoplay module.

Table 8. Autoplay Properties
Name Type Description

paused

boolean

Indicate whether autoplay is paused.

running

boolean

Indicate whether autoplay is enabled and running.

timeLeft

number

If autoplay is paused, it contains the time left (in ms) before transition starts to next slide.

Methods

Find all Methods available for the Autoplay module.

Table 9. Autoplay Methods
Name Description

paused

Pause autoplay.

resume

Resume autoplay.

start

Starts autoplay.

stop

Stops autoplay.

Find all events availalable for the

Events

Find all Events available for the Autoplay module.

All events receives swiper event data as an argument.
autoplay

Event will be fired when slide changed with autoplay.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    autoplay: function (swiper) {
      // do something
    }
  }
});
autoplayPause

Event will be fired on autoplay pause.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    autoplayPause: function (swiper) {
      // do something
    }
  }
});
autoplayResume

Event will be fired on autoplay resume.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    autoplayResume: function (swiper) {
      // do something
    }
  }
});
autoplayStart

Event will be fired in case autoplay has been started.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    autoplayStart: function (swiper) {
      // do something
    }
  }
});
autoplayStop

Event will be fired when autoplay has been stopped.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    autoplayStop: function (swiper) {
      // do something
    }
  }
});
autoplayTimeLeft

Event fires continuously while autoplay is enabled. It contains time left (in ms) before transition to next slide and percentage of the time related to autoplay delay.

Receives swiper, timeLeft, percentage event data as arguments.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    autoplayTimeLeft: function (swiper, timeLeft, percentage) {
      // do something
    }
  }
});

Controller

In SwiperJS, the Controller module allows to synchronize the movement of one or multiple slider instances. This is incredibly useful for creating complex, interconnected slider experiences. Here’s a breakdown of its key functionalities:

Master/Slave Relationship

You designate one swiper instance as the master and others as slaves.

Synchronized Slides

When the master swiper changes slides, the slave swipers automatically move to the corresponding position.

Inverse Control

You can configure the slaves to move in the opposite direction of the master.

By Slide or by Progress

Control can be based on the slide index of the master or its overall progress percentage.

Parameters

Find all parameters available for the Controller module.

Table 10. Controller Parameters
Name Type Default Description | Example

by

slide | container

slide

Defines, as a string, to control another slider or (multiple sliders) slide by slide. With respect to other slider’s grid or depending on all sliders container, depending on total slider percentage.

control

any

no default

Pass another sniper instance or an array of (multiple) sniper instances that should be controlled by this swiper. Also accepts a string with a CSS selector or the HTML Element of a swiper.

inverse

boolean

false

If set to true, the controlling direction will be inverted.

Methods

Find below available Methods for the SwiperJS Controller module.

Table 11. Controller Methods
Method Description | Example

control

Pass a swiper instance or an array of (multiple) instances that should be controlled by this swiper.

swiper.control(instance);
swiper.control(instances[]);

Cards Effect

The Cards Effect module in SwiperJS adds a visually appealing, card-like sliding animation for transitions between slides in a SwiperJS slider instance.

Be sure to have the parameter effect set to cards in order to make the module work.

Parameters

Find all parameters available for the Cards Effect module.

Table 12. Cards Effect Parameters
Name Type Default Description

perSlideOffset

number

8

Offset distance per slide (in px).

perSlideRotate

number

2

Rotate angle per slide (in degrees).

rotate

boolean

true

Enables cards rotation.

slideShadows

boolean

true

Enables slides shadows.

Coverflow Effect

Be sure to have the effect param set to 'coverflow' in order for this to work.

Parameters

Find all parameters available for the Coverflow Effect module.

Table 13. Coverflow Effect Parameters
Name Type Default Description

depth

number

100

Depth offset in px (slides translate in Z axis).

modifier

number

1

Effect multiplier.

rotate

number

50

Slide rotate in degrees.

scale

number

1

Slide scale effect.

slideShadows

boolean

true

Enables slides shadows.

stretch

number

0

Stretch space between slides (in px).

Creative Effect

The creative effect module in SwiperJS generates creative and engaging visual effects for the slides in a Swiper. It allows for a variety of custom transformations to animate the slides dynamically as they transition between each slide.

Here’s a breakdown of its key features:

Customizable Transitions

Allows you to define unique transformations for each slide (previous, next, and active) using properties like translate, rotate, scale, opacity, and more. This flexibility enables you to create a wide range of effects, from subtle shifts to dramatic 3D transformations.

Precise Control

Offers fine-grained control over the timing and appearance of each effect by manipulating CSS properties directly. You can adjust the intensity, duration, and easing of transitions to achieve the desired visual impact.

Be sure to have the parameter effect set to creative in order to make the module work.

Parameters

Find all parameters available for the SwiperJS Creative Effect module.

Table 14. Creative Effect Parameters
Name Type Default Description | Example

limitProgress

number

1

Limit progress/offset to amount of side slides. If 1, then slides all slides after prev/next will have same state. If 2, then all slides after 2nd before/after active will have same state, etc.

next

CreativeEffectTransform

no default

Next slide transformations.

perspective

boolean

true

Enable this parameter if your custom transforms require 3D transformations like translateZ, rotateX, `rotateY.

prev

CreativeEffectTransform

no defaults

Previous slide transformations. Accepts object of the following type:

progressMultiplier

number

1

Allows to multiply slides transformations and opacity.

shadowPerProgress

boolean

false

Splits shadow "opacity" per slide based on limitProgress (only if transformation shadows enabled). E.g. setting limitProgress: 2 and enabling shadowPerProgress, will set shadow opacity to 0.5 and 1 on two slides next to active. With this parameter disabled, all slides beside active will have shadow with 1 opacity

Cube Effect

The Cube Effect module in SwiperJS adds a 3D cube-like rotation effect to the transitions between slides in a SwiperJS slider instance.

Be sure to have the parameter effect set to cube in order to make the module work.

Parameters

Find all parameters available for the Cube Effect module.

Table 15. Cube Effect Parameters
Name Type Default Description

shadow

boolean

true

Enables main slider shadow.

shadowOffset

number

20

Main shadow offset in px.

shadowScale

number

0.94

Main shadow scale ratio.

slideShadows

boolean

true

Enables slides shadows.

Fade Effect

The Fade Effect module in SwiperJS creates a smooth transition between each slide. Instead of sliding or sliding the slides like other effects do, the transition causes them to fade out and the next slide to fade in.

Be sure to have the effect parameter set to fade in order in order to make the module work.

Parameter crossFade should be set to true in order to avoid seeing content behind or underneath.

Parameters

Find all parameters available for the Fade Effect module.

Table 16. Fade Effect Parameters
Name Type Default Description

crossFade

boolean

false

Enables slides cross fade.

Flip Effect

The Flip Effect module in SwiperJS adds a 3D flip animation to the slides in your slider.

Be sure to have the parameter effect set to flip in order to make the module work.

Parameters

Find all parameters available for the Flip Effect module.

Table 17. Flip Effect Parameters
Name Type Default Description

limitRotation

boolean

true

Limit edge slides rotation.

slideShadows

boolean

true

Enables slides shadows.

Free Mode

In SwiperJS, the Free Mode module allows for a more fluid and interactive sliding experience. Here’s a breakdown of its key features:

Free Movement

Slides can be freely dragged and positioned anywhere within the slider container.

Momentum

When the user releases the slide, it continues to move with momentum, simulating realistic inertia.

Sticky Option

This optional feature snaps the slide to the nearest position when it comes to rest, providing a more controlled experience.

Parameters

Find all parameters available for the Free Mode module.

Table 18. Free Mode Parameters
Name Type Default Description

enabled

boolean

false

Whether the free mode is enabled.

minimumVelocity

number

0.02

Minimum touchmove-velocity required to trigger free mode momentum.

momentum

boolean

true

If enabled, then slide will keep moving for a while after you release it.

momentumBounce

boolean

true

Set to false if you want to disable momentum bounce in free mode.

momentumBounceRatio

number

1

Higher value produces larger momentum bounce effect.

momentumRatio

number

1

Higher value produces larger momentum distance after you release slider.

momentumVelocityRatio

number

1

Higher value produces larger momentum velocity after you release slider.

sticky

boolean

false

Set to enabled to enable snap to slides positions in free mode.

Grid

The Grid module in SwiperJS allows you to create multi-row sliders, effectively arranging slides into a grid-like structure. Here’s a breakdown of its key features:

Multi-row layouts

Define the number of rows (grid.rows) to control how slides are distributed within the slider.

Fill direction

Control how slides fill the rows:

  • grid.fill: row, Slides fill rows from left to right.

  • grid.fill: column, Slides fill columns from top to bottom.

Parameters

Find all parameters available for the Grid module.

Table 19. Grid Parameters
Name Type Default Description | Example

fill

row | column

column

Can be column or row. Defines how slides should fill rows, by column or by row.

If used with loop mode make sure number of slides is even specified in loop mode requirements, or enable loopAddBlankSlides parameter

rows

number

1

Number of slides rows, for multirow layout.

Hash Navigation

Hash navigation is intended to have a link to specific slide that allows to load page with specific slide opened.

To make it work, you need to enable it by passing:

  • hashNavigation: true parameter and adding slides hashes in

  • data-hash attribute:

HTML Structure
<div id="swiperHashNavigation" class="swiper swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-hash="slide1">Slide 1</div>
    <div class="swiper-slide" data-hash="slide2">Slide 2</div>
    <div class="swiper-slide" data-hash="slide3">Slide 3</div>
    <div class="swiper-slide" data-hash="slide4">Slide 4</div>
    <div class="swiper-slide" data-hash="slide5">Slide 5</div>
    ...
  </div>
</div>
Swiper Initialization
const swiper = new Swiper('#swiperHashNavigation', {
    //enable hash navigation
    hashNavigation: true
});

Parameters

Find all parameters available for the Hash Navigation module.

Table 20. Hash Navigation Parameters
Name Type Default Description

getSlideIndex

function(swiper, hash)

no default

Designed to be used with Virtual slides when it is impossible to find slide in DOM by hash (e.g. not yet rendered).

replaceState

boolean

false

Works in addition to hashnav to replace current url state with the new one instead of adding it to history.

watchState

boolean

false

Set to true to enable also navigation through slides (when hashnav is enabled) by browser history or by setting directly hash on document location.

Events

Find below available Events for the SwiperJS Hash Navigation module.

hashChange

Event fired on window hash change.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    hashChange: function (swiper) {
      // do something
    }
  }
});
hashSet

Event fired when swiper updates the hash.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    hashSet: function (swiper) {
      // do something
    }
  }
});

History Navigation

The History Navigation module in SwiperJS allows you to integrate Swiper with history of your browser. This means, when you navigate between slides in your Swiper, the browser’s URL will be updated to reflect the current slide. This is useful for:

Browser back/forward buttons

Users can navigate through the slides using their browser’s back and forward buttons, providing a familiar and intuitive user experience.

Bookmarking specific slides

Users can easily bookmark a particular slide and return to it later.

Sharing specific slides

Sharing the URL of a specific slide with others allows them to directly access that slide.

SEO

Search engines can index individual slides and potentially this may improve your website’s search rank.

Parameters

Find all parameters available for the History Navigation module.

Table 21. History Navigation Parameters
Name Type Default Description | Example

enabled

boolean

false

Enables the History Plugin.

keepQuery

boolean

false

Keep query parameters when changing browser url.

key

string

slides

URL key for slides.

replaceState

boolean

false

Works in addition to hashnav or history to replace current url state with the new one instead of adding it to history.

root

string

empty string

swiper page root, useful to specify when you use SwiperJS history mode not on root website page. For example can be https://my-website.com/ or https://my-website.com/subpage/ or /subpage/

Keyboard Control

The Keyboard Control module in SwiperJS enables navigation through slides using the keyboard. Here’s a breakdown of its key functionalities:

Default Keys

Typically uses arrow keys (left/right) to navigate between slides.

Customizable

You can potentially configure it to use other keys if needed.

Viewport Control

This option allows you to control whether keyboard navigation works only when the SwiperJS instance is within the viewport. This can be useful to prevent accidental navigation when the swiper is off-screen.

Parameters

Find all parameters available for the Keyboard Control module.

Table 22. Keyboard Control Parameters
Name Type Default Description | Example

enabled

boolean

false

Set to true to enable keyboard control.

onlyInViewport

boolean

true

When enabled it will control sliders that are currently in viewport.

pageUpDown

boolean

true

When enabled it will enable keyboard navigation by Page Up and Page Down keys.

Properties

Find below available Properties for the SwiperJS Keyboard Control module.

Table 23. Keyboard Control Properties
Name Type Description

enabled

boolean

Whether the keyboard control is enabled.

Methods

Find below available Methods for the SwiperJS Keyboard Control module.

Table 24. Keyboard Control Methods
Method Description

disable

Disable keyboard control.

enable

Enable keyboard control.

Events

Find below available Events for the SwiperJS Keyboard Control module.

keyPress

Event fired on key press.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    keyPress: function (swiper, keyCode) {
      // do something
    }
  }
});

Lazy Loading

Since version 9 SwiperJSdoesn’t have a specific lazy loading API, as it relies on native browser lazy loading feature. To use lazy loading, we just need to set loading="lazy" on images and add preloader element:

Example
<div class="swiper">
  <div class="swiper-wrapper">
    <!-- Lazy image -->
    <div class="swiper-slide">
      <img src="path/to/picture-1.jpg" loading="lazy" />
      <div class="swiper-lazy-preloader"></div>
    </div>
    <!-- Lazy image with srcset -->
    <div class="swiper-slide">
      <img
        src="path/to/logo-small.png"
        srcset="path/to/logo-large.png 2x"
        loading="lazy"
        />
      <div class="swiper-lazy-preloader"></div>
    </div>
  </div>
</div>

As you see:

  • Lazy image must have loading="lazy" attribute

  • Add animated preloader spinner to slide which will be removed automatically after image loaded:

<div class="swiper-lazy-preloader"></div>

Or white one for dark layout:

<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

Manipulation

The Manipulation module adds useful methods to SwiperJS for manipulating slides. The module provides methods for dynamically adding, removing, and rearranging slides within the slider.

It makes sense to use it only with SwiperJS Core version, amd is not intended to be used with SwiperJS Environments like React or Vue.

Methods

Find below available Methods for the SwiperJS Manipulation module.

Table 25. Manipulation Methods
Method Description | Example

addSlide(index, slides)

Add new slides to the required index. Slides could be HTML Element or HTML string with new slide or array with such slides.

addSlide(1, '<div class="swiper-slide">Slide 10"</div>')
addSlide(1, [
  '<div class="swiper-slide">Slide 10"</div>',
  '<div class="swiper-slide">Slide 11"</div>'
]);

appendSlide(index, slides)

Add new slides to the end. Slides could be a HTML Element or HTML string with new slide or array with such slides.

appendSlide('<div class="swiper-slide">Slide 10"</div>')
appendSlide([
  '<div class="swiper-slide">Slide 10"</div>',
  '<div class="swiper-slide">Slide 11"</div>'
]);

prependSlide(index, slides)

Add new slides to the beginning. Slides could be HTML Element or HTML string with new slide or array with such slides.

prependSlide('<div class="swiper-slide">Slide 0"</div>')
prependSlide([
  '<div class="swiper-slide">Slide 1"</div>',
  '<div class="swiper-slide">Slide 2"</div>'
]);

removeAllSlides(index, slides)

Remove all slides.

removeSlide(0);       // remove first slide
removeSlide([0, 1]);  // remove first and second slides
removeAllSlides();    // Remove all slides

removeSlide(index, slides)

Remove selected slides. SlideIndex could be a number with slide index to remove or array with indexes.

removeSlide(0);       // remove first slide
removeSlide([0, 1]);  // remove first and second slides
removeAllSlides();    // Remove all slides

Mousewheel Control

The Mousewheel Control module in SwiperJS enables users to navigate through the slides of a SwiperJS instance using their mouse wheel. Here’s a breakdown of its key functionalities:

Smooth Scrolling

Allows for smooth and intuitive navigation through slides by scrolling the mouse wheel.

Configurable

Offers options to customize mousewheel behavior, such as:

  • releaseOnEdges: Allows page scrolling when the swiper reaches the beginning or end.

  • invert: Inverts the scrolling direction e.g. for scrolling up moves to the next slide.

Axis Control

Can be configured to restrict mousewheel scrolling to a defined axis, e.g. for only horizontal scrolling in horizontal mode.

Parameters

Find below available Parameters for the SwiperJS Mousewheel Control module.

Table 26. Mousewheel Control Parameters
Name Type Default Description

enabled

boolean

false

Set to true to enable mousewheel control.

eventsTarget

string

container

String with CSS selector or HTML element of the container accepting mousewheel events. By default it is swiper.

forceToAxis

boolean

false

Set to true to force mousewheel swipes to axis. So in horizontal mode mousewheel will work only with horizontal mousewheel scrolling, and only with vertical scrolling in vertical mode.

invert

boolean

false

Set to true to invert sliding direction.

noMousewheelClass

string

swiper-no-mousewheel

Scrolling on elements with this class will be ignored.

releaseOnEdges

boolean

false

Set to true and swiper will release mousewheel event and allow page scrolling when swiper is on edge positions (in the beginning or in the end).

sensitivity

number

1

Multiplier of mousewheel data, allows to tweak mouse wheel sensitivity.

thresholdDelta

null | number

null

Minimum mousewheel scroll delta to trigger swiper slide change.

thresholdTime

null | number

null

Minimum mousewheel scroll time delta (in ms) to trigger swiper slide change.

Properties

Find below available Properties for the SwiperJS Keyboard Control module.

Table 27. Mousewheel Control Properties
Name Type Description

enabled

boolean

Whether the mousewheel control is enabled.

Methods

Find below available Methods for the SwiperJS Mousewheel Control module.

Table 28. Mousewheel Control Methods
Method Description

disable

Disable mousewheel control.

enable

Enable mousewheel control.

Events

Find below available Events for the SwiperJS Mousewheel Control module.

scroll

Event fired on mousewheel scroll.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    scroll: function (swiper, event) {
      // do something
    }
  }
});

Navigation

In SwiperJS, the Navigation module provides a way to control the slider’s movement using dedicated "next" and "previous" buttons.

Customizable Buttons

You can use your own HTML elements (like buttons or icons) as navigation controls.

Flexibility

The module offers options to customize the appearance and behavior of the navigation buttons.

Parameters

Find all parameters available for the Navigation module.

Table 29. Navigation Parameters
Name Type Default Description

disabledClass

string

swiper-button-disabled

CSS class name added to navigation button when it becomes disabled.

enabled

boolean

no default

Boolean property to use with breakpoints to enable/disable navigation on certain breakpoints

hiddenClass

string

swiper-button-hidden

CSS class name added to navigation button when it becomes hidden.

hideOnClick

boolean

false

Toggle navigation button visibility after click on Slider’s container.

lockClass

string

swiper-button-lock

CSS class name added to navigation button when it is disabled.

navigationDisabledClass

string

swiper-navigation-disabled

CSS class name added on swiper container when navigation is disabled by breakpoint

nextEl

any

null

String with CSS selector or HTML element of the element that will work like next button after click on it.

prevEl

any

null

String with CSS selector or HTML element of the element that will work like prev button after click on it.

Properties

Find below available Properties for the SwiperJS Navigation module.

Table 30. Navigation Properties
Name Description | Example

nextEl

HTMLElement of next navigation button.

prevEl

HTMLElement of previous navigation button

Methods

Find below available Methods for the SwiperJS Navigation module.

Table 31. Navigation Methods
Name Description

destroy()

Destroy navigation.

init()

Initialize navigation.

update()

Update navigation buttons state (enabled/disabled).

Events

Find below available Events for the SwiperJS Navigation module.

navigationHide

Event will be fired on navigation hide

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    navigationHide: function (swiper) {
      // do something
    }
  }
});
navigationNext

Event will be fired on click the navigation next button.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    navigationNext: function (swiper) {
      // do something
    }
  }
});
navigationPrev

Event will be fired on click the navigation prev button.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    navigationPrev: function (swiper) {
      // do something
    }
  }
});
navigationShow

Event will be fired on navigation show.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    navigationShow: function (swiper) {
      // do something
    }
  }
});

CSS Properties

Find below available CSS Properties for the SwiperJS Navigation module.

{
  --swiper-navigation-size: 44px;
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
}

Pagination

The Pagination module in SwiperJS is a powerful tool that allows you to add visual indicators (like buttons) to a SwiperJS slide. The navigation elements make it clear to users how many slides there are and which slide they are currently viewing. Here’s a breakdown of its key functionalities:

Active State

The indicator corresponding to the currently active slide is visually highlighted to provide immediate feedback to the user.

User Interaction

In many cases, the pagination indicators are clickable. Clicking on an indicator will directly navigate the slider to the corresponding slide.

Visual Indicators

The module generates a set of visual indicators (often small dots or numbers) that represent each slide in your slider.

Parameters

Find all parameters available for the Pagination module.

Table 32. Pagination Parameters
Name Type Default Description | Example

bulletActiveClass

string

swiper-pagination-bullet-active

CSS class name of the active pagination bullet.

bulletClass

string

swiper-pagination-bullet

CSS class name of the pagination bullet.

bulletElement

string

span

Defines which HTML tag will be used to represent single pagination bullet. Only for pagination type of bullets .

clickable

boolean

false

If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type.

clickableClass

string

swiper-pagination-clickable

CSS class name set to pagination if its clickable.

currentClass

string

swiper-pagination-current

CSS class name of the element with currently active index in fraction pagination.

dynamicBullets

boolean

false

Good to enable if you use bullets pagination with a lot of slides. So it will keep only few bullets visible at the same time.

dynamicMainBullets

number

1

The number of main bullets visible when dynamicBullets is enabled.

el

any

null

String with CSS selector or HTML element of the container with pagination.

enabled

boolean

no default

Boolean property to use with breakpoints to enable/disable pagination on certain breakpoints.

formatFractionCurrent

function(number)

no default

Format fraction pagination current number. Function receives current number, and you need to return formatted value.

formatFractionTotal

function(number)

no default

Format fraction pagination total number. Function receives total number, and you need to return formatted value.

hiddenClass

string

swiper-pagination-hidden

CSS class name of pagination when it becomes inactive.

hideOnClick

boolean

true

Toggle (hide/show) pagination container visibility after click on slider’s container.

horizontalClass

string

swiper-pagination-horizontal

CSS class name set to pagination in horizontal Swiper.

lockClass

string

swiper-pagination-lock

CSS class name set to pagination when it is disabled.

modifierClass

string

swiper-pagination-

The beginning of the modifier CSS class name that will be added to pagination depending on parameters.

paginationDisabledClass

string

swiper-pagination-disabled

CSS class name added on swiper container and pagination element when pagination is disabled by breakpoint.

progressbarFillClass

string

swiper-pagination-progressbar-fill

CSS class name of pagination progressbar fill element.

progressbarOpposite

boolean

false

Makes pagination progressbar opposite to Swiper’s direction parameter, means vertical progressbar for horizontal swiper direction and horizontal progressbar for vertical swiper direction

progressbarOppositeClass

string

swiper-pagination-progressbar-opposite

CSS class name of pagination progressbar opposite

renderBullet

function(args)

no default

This parameter allows totally customize pagination bullets, you need to pass here a function that accepts index number of pagination bullet and required element class name (className). Only for 'bullets' pagination type.

const swiper = new Swiper('#swiper_id', {
    //...
    renderBullet: function (index, className) {
        return '<span class="' + className + '">' + (index + 1) + '</span>';
    }
});

renderCustom

function(args)

no default

This parameter is required for custom pagination type where you have to specify how it should be rendered.

const swiper = new Swiper('#swiper_id', {
    //...
    renderCustom: function (swiper, current, total) {
        return current + ' of ' + total;
    }
});

renderFraction

function(args)

no default

This parameter allows to customize fraction pagination html. Only for fraction pagination type.

const swiper = new Swiper('#swiper_id', {
    //...
    renderFraction: function (currentClass, totalClass) {
        return '<span class="' + currentClass + '"></span>' +
                ' of ' +
                '<span class="' + totalClass + '"></span>';
    }
});

renderProgressbar

function(args)

no default

This parameter allows to customize "progress" pagination. Only for progress pagination type

const swiper = new Swiper('#swiper_id', {
    //...
    renderProgressbar: function (progressbarFillClass) {
        return '<span class="' + progressbarFillClass + '"></span>';
    }
});

totalClass

string

swiper-pagination-total

CSS class name of the element with total number of snaps in fraction pagination.

type

string

bullets

String with type of pagination.
Can be bullets, fraction , progressbar or custom.

verticalClass

string

swiper-pagination-vertical

CSS class name set to pagination in vertical Swiper.

Properties

Find below available Properties for the SwiperJS Pagination module.

Table 33. Pagination Properties
Property Description | Example

bullets

Array of pagination bullets HTML elements. To get specific slide HTMLElement use swiper.pagination.bullets[1].

el

HTMLElement of pagination container element.

Methods

Find below available Methods for the SwiperJS Pagination module.

Table 34. Pagination Methods
Method Description

destroy

Destroy pagination.

init

Initialize pagination.

render

Render pagination layout.

update

Update pagination state of enabled | disabled | active.

Events

Find below available Events for the SwiperJS Pagination module.

paginationHide

Event will be fired on pagination hide.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    paginationHide: function (swiper) {
      // do something
    }
  }
});
paginationRender

Event will be fired after pagination rendered.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    paginationRender: function (swiper) {
      // do something
    }
  }
});
paginationShow

Event will be fired when pagination is shown.

Receives paginationEl event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    paginationShow: function (swiper, paginationEl) {
      // do something
    }
  }
});
paginationUpdate

Event will be fired when pagination updated

Receives paginationEl event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    paginationUpdate: function (swiper, paginationEl) {
      // do something
    }
  }
});

CSS Properties

Find below available CSS Properties for the SwiperJS Pagination module.

{
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
}

Parallax

The SwiperJS parallax module supports parallax transition effects for swiper/slides nested elements. There are two types of parallax elements supported:

  • Direct child elements of swiper. Parallax effect for such elements will depend on total slider progress. Useful for parallax backgrounds.

  • Slides child elements. Parallax effect for such elements will depend on slide progress

To enable parallax effects you need to init SwiperJS instance with passed parallax: true parameter and add one of the following (or mix) attributes to required elements:

  • data-swiper-parallax, enable transform-translate parallax transition. This attribute may accept:

    • number, value in px (as for title, subtitle in example above) to move element depending on progress. In this case such element will be moved on ± this value in px depending on slide position (next or previous)

    • percentage, (as for "parallax-bg") to move element depending on progress and on its size. In this case such element will be moved on ± this percentage of its size (width in horizontal direction, and height in vertical direction) depending on slide position (next or previous). So if element has 400px width and you specified data-swiper-parallax="50%" then it will be moved on ± 200px

  • data-swiper-parallax-x, same but for x-axis direction

  • data-swiper-parallax-y, same but for y-axis direction

  • data-swiper-parallax-scale, scale ratio of the parallax element when it is in "inactive" (not on active slide) state

  • data-swiper-parallax-opacity, opacity of the parallax element when it is in "inactive" (not on active slide) state

  • data-swiper-parallax-duration, custom transition duration for parallax elements

Example
<div class="swiper">
  <!-- Parallax background element -->
  <div
    class="parallax-bg"
    style="background-image:url(path/to/image.jpg)"
    data-swiper-parallax="-23%"
    ></div>
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- Each slide has parallax title -->
      <div class="title" data-swiper-parallax="-100">Slide 1</div>
      <!-- Parallax subtitle -->
      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
      <!-- And parallax text with custom transition duration -->
      <div
        class="text"
        data-swiper-parallax="-300"
        data-swiper-parallax-duration="600"
        >
        <p>Lorem ipsum dolor sit amet, ...</p>
      </div>
      <!-- Opacity parallax -->
      <div data-swiper-parallax-opacity="0.5">I will change opacity</div>
      <!-- Scale parallax -->
      <div data-swiper-parallax-scale="0.15">I will change scale</div>
    </div>
    ...
  </div>
</div>

Parameters

Find all parameters available for the Parallax module.

Table 35. Parallax Parameters
Name Type Default Description

enabled

boolean

false

Enable, if you want to use parallaxed elements inside of slider.

Scrollbar

The Scrollbar module in SwiperJS is a powerful tool that enhances user interaction and provides visual feedback within your slider. Here’s a breakdown of its key functionalities:

Visual Indicator

The module renders a visual scrollbar that dynamically reflects the slider’s current position. This provides users with a clear understanding of where they are within the overall content.

Draggable Interaction

The scrollbar can be made draggable, allowing users to directly control the slider’s position by moving the scrollbar handle. This offers an alternative navigation method to swiping or clicking.

Customization

You can extensively customize the appearance and behavior of the scrollbar to match your project’s design. This includes options for size, color, position, and more.

Parameters

Find all parameters available for the Scrollbar module.

Table 36. Scrollbar Parameters
Name Type Default Description

dragClass

string

swiper-scrollbar-drag

Scrollbar draggable element CSS class.

dragSize

number | auto

auto

Size of scrollbar draggable element in px.

draggable

boolean

false

Set to true to enable make scrollbar draggable that allows you to control slider position.

el

any

null

String with CSS selector or HTML element of the container with scrollbar.

enabled

boolean

no default

Boolean property to use with breakpoints to enable | disable scrollbar on certain breakpoints.

hide

boolean

true

Hide scrollbar automatically after user interaction.

horizontalClass

string

swiper-scrollbar-horizontal

CSS class name set to scrollbar in horizontal Swiper.

lockClass

string

swiper-scrollbar-lock

Scrollbar element additional CSS class when it is disabled.

scrollbarDisabledClass

string

swiper-scrollbar-disabled

CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint.

snapOnRelease

boolean

false

Set to true to snap slider position to slides when you release scrollbar.

verticalClass

string

swiper-scrollbar-vertical

CSS class name set to scrollbar in vertical Swiper.

Properties

Find below available Properties for the SwiperJS Scrollbar module.

Table 37. Scrollbar Properties
Property Description

dragEl

HTML Element of Scrollbar draggable handler element.

el

HTML Element of Scrollbar container element.

Methods

Find below available Methods for the SwiperJS Scrollbar module.

Table 38. Scrollbar Methods
Name Description

destroy

Destroy scrollbar.

init

Initialize scrollbar.

setTranslate

Updates scrollbar translate.

updateSize

Updates scrollbar track and handler sizes.

Events

scrollbarDragEnd

Event fired on draggable scrollbar drag end.

Receives scrollbar event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    scrollbarDragEnd: function (swiper, event) {
      // do something
    }
  }
});
scrollbarDragMove

Event will be fired on draggable scrollbar drag move.

Receives scrollbar event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    scrollbarDragMove: function (swiper, event) {
      // do something
    }
  }
});
scrollbarDragStart

Event will be fired on draggable scrollbar drag start.

Receives scrollbar event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    scrollbarDragStart: function (swiper, event) {
      // do something
    }
  }
});

CSS Properties

{
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
}

Thumbs

In SwiperJS, the Thumbs module enables to create a thumbnail navigation (slave) for (master) sliders.

In addition to the SwiperJS Controller module the API comes with the Thumbs module that is designed to work with a additional (slave) thumbs swiper for a more correct way for syncing two swipers.

Parameters

Find all parameters available for the Thumbs module.

Table 39. Thumbs Parameters
Name Type Default Description

autoScrollOffset

number

0

Allows to set on which thumbs active slide from edge it should automatically move scroll thumbs. For example, if set to 1 and last visible thumb will be activated (1 from edge) it will auto scroll thumbs.

multipleActiveThumbs

boolean

true

When enabled multiple thumbnail slides may get activated.

slideThumbActiveClass

string

swiper-slide-thumb-active

Additional class that will be added to activated thumbs swiper slide.

swiper

any

null

SwiperJS instance of swiper used as thumbs or object with SwiperJS API parameters to initialize thumbs swiper.

thumbsContainerClass

string

swiper-thumbs

Additional class that will be added to thumbs swiper

Properties

Find below available Properties for the SwiperJS Thumbs module.

Table 40. Thumbs Properties
Name Type Description

swiper

any

SwiperJS instance of thumbs swiper.

Methods

Find below available Methods for the SwiperJS Thumbs module.

init

Initialize thumbs.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    init: function (swiper) {
      // do something
    }
  }
});
update

Update thumbs.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    update: function (initial) {
      // do something
    }
  }
});

Virtual Slides

Virtual Slides module allows to keep just required amount of slides in DOM. It is very useful in terms in performance and memory issues if you have a lot of slides, especially slides with heavyweight DOM tree or images.

Virtual Slides doesn’t work with Grid module and if parameter slidesPerView is set to auto.

Parameters

Find all parameters available for the Virtual Slides module.

Table 41. Virtual Slides Parameters
Name Type Default Description

addSlidesAfter

number

0

Increases amount of pre-rendered slides after active slide.

addSlidesBefore

number

0

Increases amount of pre-rendered slides before active slide.

cache

boolean

true

Enables DOM cache of rendering slides html elements. Once rendered, they will be saved to cache and reused from it.

enabled

boolean

false

Whether the virtual slides are enabled.

renderExternal

function(data)

no default

Function for external rendering (e.g. using some other library to handle DOM manipulations and state like React.js or Vue.js). As an argument it accepts data object with the following properties:

  • offset, slides left/top offset in px

  • from, index of first slide required to be rendered

  • to, index of last slide required to be rendered

  • slides, array with slide items to be rendered

renderExternalUpdate

boolean

true

When enabled (by default) it will update swiper layout right after renderExternal called. Useful to disable and update swiper manually when used with render libraries that renders asynchronously

renderSlide

function(slide, index)

no default

Function to render slide. As an argument it accepts current slide item for slides array and index number of the current slide. Function must return an outer HTML of the swiper slide or slide HTML element.

slides

Text[]

[]

Array with slides.
Name Type Description

cache

object

Object with cached slides HTML elements.

from

number

Index of first rendered slide.

slides

Text[]

Array with slide items passed by virtual.slides parameter.

to

number

Index of last rendered slide.

Methods

Find below available Methods for the SwiperJS Virtual Slides module.

Table 42. Virtual Slides Methods
Name Description

appendSlide(slide)

Append slide. Slides defined by slides can be a single slide item or an array with such slides.

Only for Core version. In React & Vue it should be done by modifying slides array/data/source.

prependSlide(slide)

Prepend slide. Slides defined by slides can be a single slide item or an array with such slides.

Only for Core version. In React & Vue it should be done by modifying slides array/data/source.

removeAllSlides

Remove all slides.

Only for Core version. In React & Vue it should be done by modifying slides array/data/source.

removeSlide(slideIndexes)

Remove specific slide or slides. Index defined by slideIndexes can be a number with slide index to remove or an array with indexes.

Only for Core version. In React & Vue it should be done by modifying slides array/data/source.

update(force)

Update virtual slides state.

DOM

Since version 9, SwiperJS virtual slides can work with slides originally rendered in DOM. On initialize it will remove them from DOM, cache and then re-use the ones which are required:

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    ...
    <div class="swiper-slide">Slide 100</div>
  </div>
</div>
<script>
  const swiper = new Swiper('#swiper_id', {
    virtual: {
    enabled: true
    }
  });
</script>

Zoom

SwiperJS supports a Zoom functionality on images (similar to what you see on iOS when browsing single photo) where you can zoom-in image by pinch gesture and or by zoom-in/zoom-out by double tap on it. In this case, a additional layout is required:

Example
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img src="path/to/image1.jpg" />
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img src="path/to/image2.jpg" />
      </div>
    </div>
    <div class="swiper-slide">Plain slide with text</div>
    <div class="swiper-slide">
      <!-- Override maxRatio parameter -->
      <div class="swiper-zoom-container" data-swiper-zoom="5">
        <img src="path/to/image1.jpg" />
      </div>
    </div>
  </div>
</div>

All zoomable images should be wrapped with the div with swiper-zoom-container class. By default it expects to zoom one of the img, picture or canvas element. If you want to make zoom on some other custom element, then just add swiper-zoom-target class to this element.

Example
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <!-- custom zoomable element -->
        <div
          class="swiper-zoom-target"
          style="background-image: url(...)"
          ></div>
      </div>
    </div>
  </div>
</div>

You can override maxRatio parameter for specific slides by using data-swiper-zoom attribute on zoom container.

Parameters

Find all parameters available for the Zoom module.

Table 43. Zoom Parameters
Name Type Default Description

containerClass

string

swiper-zoom-container

CSS class name of zoom container.

limitToOriginalSize

boolean

false

When set to true, the image will not be scaled past 100% of its original size.

maxRatio

number

3

Maximum image zoom multiplier.

minRatio

number

1

Minimal image zoom multiplier.

panOnMouseMove

boolean

false

When set to true, a zoomed in image will automatically pan while moving the mouse over the image.

toggle

boolean

true

Enable/disable zoom-in by slide’s double tap.

zoomedSlideClass

string

swiper-slide-zoomed

CSS class name of zoomed in container.

Properties

Find below available Properties for the SwiperJS Zoom module.

Table 44. Zoom Properties
Name Type Description

enabled

boolean

Whether the zoom module is enabled.

scale

number

Current image scale ratio.

Methods

Find below available Methods for the SwiperJS Zoom module.

Table 45. Zoom Methods
Name Description

disable

Disable the Zoom module.

enable

Enable the Zoom module.

in(ratio)

Zoom in the image of the currently active slide. Optionally accepts custom zoom ratio.

out

Zoom out the image of the currently active slide.

toggle(event)

Toggle image zoom of the currently active slide.

Events

The module allows you to zoom in and out of images within a slider. Zoom Events likely refers to custom events you might create or utilize within a SwiperJS implementation to:

  • Trigger actions when zooming begins, ends, or changes.

  • Coordinate with other parts of your application based on zoom levels.

  • Enhance user interactions with dynamic effects or UI updates.

zoomChange

Event fired on zoom change.

Receives evants scale, imageEl, slideEl as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    zoomChange: function (swiper, scale, imageEl, slideEl) {
      // do something
    }
  }
});

Methods

Find method settings also with the Swiper Documentation.

Change the Swiper instance variable swiper used in column Synopsis to your setup.

attachEvents

Re-Attach all event listeners configured for an instance.

Synopsis Description | Parameters 
swiper.attachEvents();

Attach all event listeners again.

changeDirection

Change the slider orientation from horizontal to vertical or back.

Synopsis Description | Parameters 
swiper.changeDirection(
    direction,
    needUpdate
);

Change the slider orientation from horizontal to vertical and back.

direction

If not specified, the value will automatically toggle the direction (to the opposite).

  • Type: string of horizontal or vertical.

  • Default: no defaults

needUpdate

If set to true, automatically update() method is called.

  • Type boolean

  • Default: true

changeLanguageDirection

Changes slider language direction.

Synopsis Description | Parameters 
swiper.changeLanguageDirection(direction);

Changes slider language direction.

direction

Should be rtl or ltr.

  • Type: string of rtl or ltr.

  • Default: no defaults

destroy

Destroy a slider instance and detach all event listeners.

Synopsis Description | Parameters 
swiper.destroy(
    deleteInstance,
    cleanStyles
);

Destroy a slider instance and detach all event listeners.

deleteInstance

Set to false to not delete the swiper instance.

  • Type: boolean

  • Default: true

cleanStyles

If set to true, all custom styles will be removed from slides, wrapper and container. Useful if you need to destroy a swiper instance and to init again with new options or in different direction.

  • Type: boolean

  • Default: true

detachEvents

Detach all event listeners.

Synopsis Description | Parameters 
swiper.detachEvents();

Detach all event listeners.

disable

Disable Swiper (if it was enabled). When Swiper is disabled, it will hide all navigation elements and won’t respond to any events and interactions.

Synopsis Description | Parameters 
swiper.disable();

Disable Swiper (if it was enabled). When Swiper is disabled, it will hide all navigation elements and won’t respond to any events and interactions.

emit

Fire event on instance.

Synopsis Description | Parameters 
swiper.emit(
    event,
    args
);

Fire event on instance.

enable

Enable a swiper instance (if it was disabled).

Synopsis Description | Parameters 
swiper.enable();

Enable a swiper instance (if it was disabled).

extendDefaults

Extend a swiper instance by (global) swiper options (properties). See section [Common options] for common, frequently used options.

Synopsis Description | Parameters 
swiper.extendDefaults(options);

Extend a swiper instance by (global) swiper options (properties). See section [Common options] for common, frequently used options.

getTranslate

Get current values of swiper wrapper CSS3 transform translate settings.

Synopsis Description | Parameters 
swiper.getTranslate();

Get current values of swiper wrapper CSS3 transform translate settings.

init

Initialize a slider on its HTML element el.

Synopsis Description | Parameters 
swiper.init(el);

Initialize a slider on its HTML element el.

maxTranslate

Get current maximal CSS3 transform translate value.

Synopsis Description | Parameters 
swiper.maxTranslate();

Get current minimal CSS3 transform translate value.

minTranslate

Get current maximal CSS3 transform translate value.

Synopsis Description | Parameters 
swiper.minTranslate();

Get current minimal CSS3 transform translate value.

off

Remove a event handler.

Synopsis Description | Parameters 
swiper.off(
    event,
    handler
);

Remove a event handler.

offAny

Remove a event listener that will be fired on all events.

Synopsis Description | Parameters 
swiper.offAny(handler);

Remove a event listener that will be fired on all events.

on

Add a event handler.

Synopsis Description | Parameters 
swiper.on(event, handler);

Add a event handler.

onAny

Add a event listener that will be fired on all events.

Synopsis Description | Parameters 
swiper.onAny(handler);

ReAddmove a event listener that will be fired on all events.

once

Add a event handler that is run only once. The event handler will be removed after it was fired.

Synopsis Description | Parameters 
swiper.once(
    event,
    handler
);

Add a event handler that is run only once. The event handler will be removed after it was fired.

setGrabCursor

Enable|Set a grab cursor on the swiper instance.

Synopsis Description | Parameters 
swiper.setGrabCursor();

Enable | Set a grab cursor on the swiper instance.

setProgress

Set Swiper translate progress (from 0 to 1). Where 0 its initial position (offset) on first slide, and 1 its maximum position (offset) on last slide.

Synopsis Description | Parameters 
swiper.setProgress(
    progress,
    speed
);

Set Swiper translate progress (from 0 to 1). Where 0 its initial position (offset) on first slide, and 1 its maximum position (offset) on last slide.

progress

Swiper CSS3 translate progress.

  • Type: number from 0 to 1

  • Default: no default

speed

Transition duration (in ms).

  • Type: number

  • Default: no default

setTranslate

Set custom values for CSS3 transform translate settings of the swiper wrapper.

Synopsis Description | Parameters 
swiper.setTranslate(translate);

Set custom values for CSS3 transform translate settings of the swiper wrapper.

slideNext

Run transition to next slide.

Synopsis Description | Parameters 
swiper.slideNext(
    speed,
    runCallbacks
);

Run transition to next slide.

speed

Transition duration (in ms).

  • Type: number

  • Default: no default

runCallbacks

Set it to false, the transition will not produce transition events.

  • Type: boolean

  • Default: true

slidePrev

Run transition to previous slide.

Synopsis Description | Parameters 
swiper.slidePrev(
    speed,
    runCallbacks
);

Run transition to previous slide.

speed

Transition duration (in ms).

  • Type: number

  • Default: no default

runCallbacks

Set it to false, the transition will not produce transition events.

  • Type: boolean

  • Default: true

slideReset

Reset swiper position to currently active slide for the duration equal to speed parameter.

Synopsis Description | Parameters 
swiper.slideReset(
    speed,
    runCallbacks
);

Reset swiper position to currently active slide for the duration equal to speed parameter.

speed

Transition duration (in ms).

  • Type: number

  • Default: no default

runCallbacks

Set it to false, the transition will not produce transition events.

  • Type: boolean

  • Default: true

slideTo

Run transition to the slide with index number equal to the index parameter for the duration equal to speed parameter.

Synopsis Description | Parameters 
swiper.slideTo(
    index,
    speed,
    runCallbacks
);

Run transition to the slide with index number equal to the index parameter for the duration equal to speed parameter.

index

Index number of slide.

  • Type: number

  • Default: no default

speed

Transition duration (in ms).

  • Type: number

  • Default: no default

runCallbacks

Set it to false, the transition will not produce transition events.

  • Type: boolean

  • Default: true

slideToClosest

Reset swiper position to closest slide/snap point for the duration equal to speed parameter.

Synopsis Description | Parameters 
swiper.slideToClosest(
    speed,
    runCallbacks
);

Reset swiper position to closest slide/snap point for the duration equal to speed parameter.

speed

Transition duration (in ms).

  • Type: number

  • Default: no default

runCallbacks

Set it to false, the transition will not produce transition events.

  • Type: boolean

  • Default: true

slideToLoop

Does the same as method slideTo() but in case when used with enabled loop. So this method will slide to slides with realIndex matching to passed index.

Synopsis Description | Parameters 
swiper.slideToLoop(
    index,
    speed,
    runCallbacks
);

Does the same as method slideTo() but in case when used with enabled loop. So this method will slide to slides with realIndex matching to passed index.

index

Index number of slide.

  • Type: number

  • Default: no default

speed

Transition duration (in ms).

  • Type: number

  • Default: no default

runCallbacks

Set it to false, the transition will not produce transition events.

  • Type: boolean

  • Default: true

slidesPerViewDynamic

Get dynamically calculated amount of slides per view. Only useful when property slidesPerView set to auto.

Synopsis Description | Parameters 
swiper.slidesPerViewDynamic();

Get dynamically calculated amount of slides per view.

Only useful when property slidesPerView set to auto.

translateTo

Animate custom CSS3 transform' translate value for swiper wrapper.

Synopsis Description | Parameters 
swiper.translateTo(
    translate,
    speed,
    runCallbacks,
    translateBounds
);

Animate custom CSS3 transform' translate value for swiper wrapper.

translate

Translate value (in px).

  • Type: number

  • Default: no default

speed

Transition duration (in ms).

  • Type: number

  • Default: no default

runCallbacks

Set it to false, the transition will not produce transition events.

  • Type: boolean

  • Default: true

translateBounds

Set it to false the transition value can extend beyond min and max translate.

  • Type: boolean

  • Default: true

role="mt-4"]

unsetGrabCursor

Disable | Unset a grab cursor on the swiper instance.

Synopsis Description | Parameters 
swiper.unsetGrabCursor();

Disable|Unset a grab cursor on the swiper instance.

update

Should called after add/remove slides manually, or after hide/show a slider, or any custom DOM modifications done with Swiper.

Synopsis Description | Parameters 
swiper.update();

Should called after add/remove slides manually, or after hide/show a slider, or any custom DOM modifications done with a swiper.

updateAutoHeight

Force swiper to update its height (when autoHeight is enabled) for the duration equal to speed parameter.

Synopsis Description | Parameters 
swiper.updateAutoHeight(speed);

Force swiper to update its height (when autoHeight is enabled) for the duration equal to speed parameter.

speed

Transition duration (in ms).

  • Type: number

  • Default: no default

updateProgress

Recalculate swiper progress.

Synopsis Description | Parameters 
swiper.updateProgress();

Recalculate swiper progress.

updateSize

Recalculate size of swiper container.

Synopsis Description | Parameters 
swiper.updateSize();

Recalculate size of swiper container.

updateSlides

Recalculate number of slides and their offsets. Useful after add/remove slides.

Synopsis Description | Parameters 
swiper.updateSlides();

Recalculate number of slides and their offsets. Useful after add/remove slides.

updateSlidesClasses

Update active/prev/next classes on slides and bullets.

Synopsis Description | Parameters 
swiper.updateSlidesClasses();

Update active/prev/next classes on slides and bullets.

updateSlidesClasses

Installs Swiper modules on a instance at runtime.

Synopsis Description | Parameters 
swiper.use(modules);

Installs Swiper modules on a instance at runtime.

Events A - R

The Swiper API comes with a large number of predefined event listeners you can assign to an (swiper) instance. Find available event listeners also with the Swiper Documentation.

Assignment

Events can be assigned in two ways.

On swiper initialization

Fire event on swiper initialization.

const swiper = new Swiper('#swiper_id', {
  // ...
  on: {
    init: function function (swiper) {
      console.log('swiper initialized');
    }
  }
});

After swiper initialization

Fire event after swiper initialization.

const swiper = new Swiper('#swiper_id', {
  // ...
});
swiper.on('slideChange', function (swiper) {
  console.log('slide changed');
});

The this keyword within a event handler points always to the swiper instance.

Listeners

Available predefined event listeners.

activeIndexChange

Event fired on active index change.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    activeIndexChange: function (swiper) {
      // do something
    }
  }
});

afterInit

Event fired right after swipers initialization.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    afterInit: function (swiper) {
      // do something
    }
  }
});

beforeDestroy

Event fired right before swiper instance is destroyed.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    beforeDestroy: function (swiper) {
      // do something
    }
  }
});

beforeInit

Event fired right before swiper initialization.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    beforeInit: function (swiper) {
      // do something
    }
  }
});

afterDestroy

Event fired right after swiper instance is destroyed.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    afterDestroy: function (swiper) {
      // do something
    }
  }
});

beforeLoopFix

Event fired right before loop fix.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    beforeLoopFix: function (swiper) {
      // do something
    }
  }
});

beforeResize

Event fired before resize handler.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    beforeResize: function (swiper) {
      // do something
    }
  }
});

beforeSlideChangeStart

Event fired before slide change transition start.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    beforeSlideChangeStart: function (swiper) {
      // do something
    }
  }
});

beforeTransitionStart

Event fired before transition starts.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    beforeTransitionStart: function (swiper, speed, internal) {
      // do something
    }
  }
});

breakpoint

Event fired on breakpoint change

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    breakpoint: function (swiper, breakpointParams) {
      // do something
    }
  }
});

changeDirection

Event fired on direction change.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    changeDirection: function (swiper) {
      // do something
    }
  }
});

click

Event fired when user click/tap on Swiper.

Receives pointerup event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    click: function (swiper,event) { {
      // do something
    }
  }
});

destroy

Event fired after swiper is destroyed.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    destroy: function (swiper) {
      // do something
    }
  }
});

doubleClick

Event fired when user double click/tap on Swiper.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    doubleClick: function (swiper,event) { {
      // do something
    }
  }
});

doubleTap

Event fired when user double tap on the Swipers container.

Receives pointerup event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    doubleTap: function (swiper,event) { {
      // do something
    }
  }
});

fromEdge

Event fired when Swiper goes from beginning or end position.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    fromEdge: function (swiper) {
      // do something
    }
  }
});

init

Fired after Swiper initialization.

The swiper.on('init') syntax works only in case setting the parameter init to false and run explicitely an initialization.

const swiper = new Swiper('#swiper_id', {
  init: false,
  // other parameters
});
swiper.on('init', function (swiper) {
 // do something
});
// init Swiper
swiper.init();

Otherwise use the event as an initialization parameter on instance setup (new) as shown below.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    init: function (swiper) {
      // do something
    }
  }
});

lock

Event fired when swiper is locked (if watchOverflow is enabled).

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    lock: function (swiper) {
      // do something
    }
  }
});

loopFix

Event fired after loop fix.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    loopFix: function (swiper) {
      // do something
    }
  }
});

momentumBounce

Event fired on momentum bounce.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    momentumBounce: function (swiper) {
      // do something
    }
  }
});

observerUpdate

Event fired if observer is enabled and a DOM mutations is detected.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    observerUpdate: function (swiper) {
      // do something
    }
  }
});

orientationchange

Event fired on orientation change (e.g. landscape → portrait).

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    orientationchange: function (swiper) {
      // do something
    }
  }
});

progress

Event fired when Swiper progress has been changed.

Receives progress event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    progress: function  (swiper, progress) {
      // do something
    }
  }
});

reachBeginning

Event fired when Swiper reach its beginning (initial position).

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    reachBeginning: function (swiper) {
      // do something
    }
  }
});

reachEnd

Event fired when Swiper reach last slide.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    reachEnd: function (swiper) {
      // do something
    }
  }
});

realIndexChange

Event fired on real index change.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    realIndexChange: function (swiper) {
      // do something
    }
  }
});

resize

Event fired on window resize and before on s swiper onresize manipulation.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    resize: function (swiper) {
      // do something
    }
  }
});

Events S - Z

The Swiper API comes with a large number of predefined event listeners you can assign to an (swiper) instance. Find available event listeners also with the Swiper Documentation.

setTransition

Event fired everytime when swiper starts animation.

Receives transition duration value (in ms) as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    setTransition: function (swiper, transition) {
      // do something
    }
  }
});

setTranslate

Set custom CSS3 transform translate value for the swiper wrapper.

Receives current translate value as as argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    setTranslate: function (swiper, translate)) {
      // do something
    }
  }
});

slideChange

Event fired when active slide has been changed.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    slideChange: function (swiper) {
      // do something
    }
  }
});

slideChangeTransitionEnd

Event fired after animation to other slide (next or previous).

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    slideChangeTransitionEnd: function (swiper) {
      // do something
    }
  }
});

slideChangeTransitionStart

Event fired in the beginning of animation to other slide (next or previous).

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    slideChangeTransitionStart: function (swiper) {
      // do something
    }
  }
});

slideNextTransitionEnd

Same as slideChangeTransitionEnd but only for forward direction.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    slideNextTransitionEnd: function (swiper) {
      // do something
    }
  }
});

slideNextTransitionStart

Same as slideChangeTransitionStart but only for forward direction.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    slideNextTransitionStart: function (swiper) {
      // do something
    }
  }
});

slidePrevTransitionEnd

Same as slideChangeTransitionEnd but only for backward direction.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    slidePrevTransitionEnd: function (swiper) {
      // do something
    }
  }
});

slidePrevTransitionStart

Same as slideChangeTransitionStart but only for backward direction.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    slidePrevTransitionStart: function (swiper) {
      // do something
    }
  }
});

slideResetTransitionEnd

Event fired in the end of animation of resetting slide to current one.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    slideResetTransitionEnd: function (swiper) {
      // do something
    }
  }
});

slideResetTransitionStart

Event fired in the beginning of animation of resetting slide to current one.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    slideResetTransitionStart: function (swiper) {
      // do something
    }
  }
});

sliderFirstMove

Event fired when user touch and move finger over Swiper and move it.

Receives pointermove event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    xxx: function (swiper,event) { {
      // do something
    }
  }
});

sliderMove

Event fired when user touch and move finger over Swiper and move it.

Receives pointermove event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    sliderMove: function (swiper,event) { {
      // do something
    }
  }
});

slidesGridLengthChange

Event fired when slides grid has been changed.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    slidesGridLengthChange: function (swiper) {
      // do something
    }
  }
});

slidesLengthChange

Event fired when number of slides has been changed.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    slidesLengthChange: function (swiper) {
      // do something
    }
  }
});

slidesUpdated

Event fired after slides and their sizes are calculated and updated.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    slidesUpdated: function (swiper) {
      // do something
    }
  }
});

snapGridLengthChange

Event fired when snap grid has been changed.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    snapGridLengthChange: function (swiper) {
      // do something
    }
  }
});

snapIndexChange

Event fired when snap index has been changed.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    xxx: function (swiper) {
      // do something
    }
  }
});

tap

Event fired when user click/tap on Swiper.

Receives pointerup event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    tap: function (swiper,event) { {
      // do something
    }
  }
});

toEdge

Event fired when Swiper goes to beginning or end position.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    toEdge: function (swiper) {
      // do something
    }
  }
});

touchEnd

Event fired after user releases the swiper.

Receives pointerup event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    touchEnd: function (swiper,event) { {
      // do something
    }
  }
});

touchMove

Event fired when user touch and move finger over the swiper.

Receives pointermove event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    touchMove: function (swiper,event) { {
      // do something
    }
  }
});

touchMoveOpposite

Event fired when user touch and move finger over Swiper in opposite to the direction parameter.

Receives pointermove event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    touchMoveOpposite: function (swiper,event) { {
      // do something
    }
  }
});

touchStart

Event fired when user touches the swiper.

Receives pointerdown event as an argument.
Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    touchStart: function (swiper,event) { {
      // do something
    }
  }
});

transitionEnd

Event fired after a transition.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    xxx: function (swiper) {
      // do something
    }
  }
});

transitionStart

Event fired in the beginning of a transition.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    transitionStart: function (swiper) {
      // do something
    }
  }
});

unlock

Event fired when swiper is unlocked (if parameter watchOverflow is enabled).

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    unlock: function (swiper) {
      // do something
    }
  }
});

update

Event fired after update() call is finished.

Usage 
const swiper = new Swiper('#swiper_id', {
  // option settings ...
  on: {
    update: function (swiper) {
      // do something
    }
  }
});