« Changelog History


Swiper v6.0.0 Release Notes

Release Date: 2020-05-26 // almost 4 years ago

    • 🆕 New NPM package structure

      • All scripts transpiled to ES5
      • New and renamed files (BREAKING CHANGE):
      • swiper.less - core Swiper LESS
      • swiper.scss - core Swiper SCSS
      • swiper-bundle.css - Swiper bundle CSS
      • swiper-bundle.js - Swiper bundle JavaScript in UMD format
      • swiper-bundle.cjs.js - Swiper bundle JavaScript in CommonJS format
      • swiper-bundle.esm.js - Swiper bundle JavaScript in ESM format
      • swiper.cjs.js - Swiper core JavaScript in CommonJS format
      • swiper.esm.js - Swiper core JavaScript in ESM format
      • Following imports are now available
      • import Swiper from 'swiper' - imports core version
      • import Swiper from 'swiper/bundle' - imports bundle version
      • import Swiper from 'swiper/core' - imports core version
      • Components can be imported from core version using named imports, or using direct import:
      import { Navigation } from 'swiper';
// or
import Navigation from 'swiper/components/navigation';

// and styles (Less or SCSS only)
import 'swiper/components/navigation/navigation.less';

    • 👍 Full server-side rendering support (SSR) with new parameters:

      • userAgent - device user agent, required for some initial detection
      • url - required to correctly detect and set initial slide if Hash Navigation or History modules are used

    • 🆕 New loopPreventsSlide boolean parameter (by default enabled), that prevents slidePrev/Next transitions while transition is in progress

    • 👍 Full support for Node.js DOM libraries like JSDOM and Domino

    • ➕ Added new onAny(callback) listener to listen for any swiper event

    • 💥 All events now emit swiper instance as a first argument (BREAKING CHANGE)

    • ➕ Added official TypeScript definitions

    • ⚡️ Updated to use next generation dom7 and ssr-window libraries

    • All new Swiper React components:

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

  export default () => {
    return (
      <Swiper
        spaceBetween={50}
        slidesPerView={3}
        onSwiper={(swiper) => console.log(swiper)}
        onSlideChange={() => console.log('slide change')}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        ...
      </Swiper>
    );
  };