Interface SwiperOptions

example

const swiper = new Swiper('.swiper', {
  a11y: {
    prevSlideMessage: 'Previous slide',
    nextSlideMessage: 'Next slide',
  },
});

default

true

default

true

default

true

default

false

example

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

example

const swiper = new Swiper('.swiper', {
  // 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
    }
  }
})

example

const swiper = new Swiper('.swiper', {
  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,
    },
  }
});

default

'window'

note

Currently in beta and not supported by Swiper React and Vue components

example

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

default

false

default

false

default

false

default

'swiper-'

example

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

example

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

default

false

example

const swiper = new Swiper('.swiper', {
  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],
    },
  },
});

This is what is not supported when it is enabled:

• Cube effect
• speed parameter may not have no effect
• All transition start/end related events (use slideChange instead)
• slidesPerGroup has limited support
• simulateTouch doesn't have effect and "dragging" with mouse doesn't work
• resistance doesn't have any effect
• allowSlidePrev/Next
• swipeHandler

In case if you use it with other effects, especially 3D effects, it is required to wrap slide's content with <div class="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.

• @example

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

default

false

example

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

default

'horizontal'

default

false

default

20

default

'slide'

default

true

example

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

example

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

default

'input, select, option, textarea, button, video, label'

default

true

example

const swiper = new Swiper('.swiper', {
  freeMode: true,
});

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

default

false

example

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

example

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

default

null

note

Setting this parameter will make Swiper not responsive

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

example

const swiper = new Swiper('.swiper', {
  history: {
    replaceState: true,
  },
});

example

<!-- will produce "slides/slide1" url in browser history -->
<div class="swiper-slide" data-history="slide1"></div>

default

true

default

0

example

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

default

0

default

'swiper-lazy-preloader'

default

true

default

300

default

0.5

Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be >= slidesPerView * 2

default

false

default

true

default

null

note

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

default

10

example

import Swiper, { Navigation, Pagination } from 'swiper';

const swiper = new Swiper('.swiper', {
   modules: [ Navigation, Pagination ],
 });

example

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

example

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

default

false

default

true

default

'swiper-no-swiping'

default

default

true

default

false

default

false

default

false

default

false

example

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

example

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

default

true

default

true

default

true

default

false

default

true

default

0.85

default

true

default

false

note

Should not be used together with loop mode

default

false

default

true

example

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

default

false

default

true

default

true

default

'swiper-slide-active'

note

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

note

Not supported in Swiper React/Vue components

default

'swiper-slide'

note

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

note

Not supported in Swiper React/Vue components

default

'swiper-slide-next'

note

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

note

Not supported in Swiper React/Vue

default

'swiper-slide-prev'

note

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

note

Not supported in Swiper React/Vue

default

false

default

'swiper-slide-visible'

note

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

note

Not supported in Swiper React/Vue

default

0

default

0

default

1

default

false

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

default

0

note

slidesPerView: 'auto' is currently not compatible with multirow mode, when grid.rows > 1

default

1

default

0

note

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

default

300

default

null

default

5

example

const swiper = new Swiper('.swiper', {
  ...
  thumbs: {
    swiper: thumbsSwiper
  }
});

default

45

default

'wrapper'

default

false

default

1

default

false

default

false

default

true

default

true

default

true

default

null

default

null

example

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

default

false

default

true

default

false

default

null

note

Setting this parameter will make Swiper not responsive

default

'swiper-wrapper'

note

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

note

Not supported in Swiper React/Vue

example

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