Migration Guide to Swiper 11

Loop Mode

Loop mode has been seriously improved in v11, there is only one breaking change to pay attention here:

• loopedSlides parameter has been removed. If it breaks your slider loop behavior - try to use new loopAdditionalSlides parameter

Element Events Prefix

All Swiper Element events are prefixed now with swiper by default. You need to modify your code to listen for new events or roll back to previous behavior by specifying eventsPrefix: '' (empty string) parameter.

<swiper-container> ... </swiper-container>
<script>
  const swiperEl = document.querySelector('swiper-container');

  // listen for `slideChange` event
  swiperEl.addEventListener('swiperslidechange', onSlideChange);
</script>

Overflow Hidden

In Swiper v11, the overflow CSS property of the container defaulted to hidden. If it breaks your layout, just add custom CSS styles:

.swiper {
  overflow: clip;
}