Swiper Svelte Components

Installation

Swiper Svelte is available only via NPM as a part of the main Swiper library:

npm i swiper

Usage

swiper/svelte exports 2 components: Swiper and SwiperSlide:

<Swiper
  spaceBetween={50}
  slidesPerView={3}
  on:slideChange={() => console.log('slide change')}
  on:swiper={(e) => console.log(e.detail[0])}
>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
  ...
</Swiper>
<script>
// Import Swiper Svelte components
import { Swiper, SwiperSlide } from 'swiper/svelte';

// Import Swiper styles
import 'swiper/swiper.scss';
</script>

By default Swiper Svelte uses core version of Swiper (without any additional components). If you want to use Navigation, Pagination and other components, you have to install them first.

Here is the list of additional modules imports:

<Swiper
  spaceBetween={50}
  slidesPerView={3}
  navigation
  pagination={{ clickable: true }}
  scrollbar={{ draggable: true }}
  on:slideChange={() => console.log('slide change')}
  on:swiper={(e) => console.log(e.detail[0])}
>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
  ...
</Swiper>
<script>
// import Swiper core and required components
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

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

// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';

// install Swiper components
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

</script>
`

Note, Swiper Svelte component will create required elements for Navigation, Pagination and Scrollbar if you pass these params without specifying its elements (e.g. without navigation.nextEl, pagination.el, etc.)

Styles

Swiper package contains different sets of CSS, Less and SCSS styles:

CSS Styles

CSS styles available only for bundle version:

Less Styles

Less styles are separate styles for core version and components:

SCSS Styles

SCSS styles are also separate styles for core version and components:

Swiper props

Swiper Svelte component receive all Swiper parameters as component props.

<Swiper
  slidesPerView={3}
  spaceBetween={50}
  navigation
  pagination
  ...
>

Swiper events

Swiper component supports all Swiper events, including additional swiper event that returns swiper instance as soon as posible.

All event arguments will be passed as array and they are accessible in event.detail.

For example:

<Swiper
  on:swiper={onSwiper}
  on:slideChange={() => console.log('slide change'))}
  on:progress={onProgress}
>
  ...
</Swiper>
<script>
  import { Swiper, SwiperSlide } from 'swiper/svelte';

  /* "progress" event emitted with "swiper" and "progress" argumentts */
  const onProgress = (e) => {
    const [swiper, progress] = e.detail;
    console.log(progress);
  }

  /* "swiper" event emitted with "swiper" instance argument */
  const onSwiper = (e) => {
    const [swiper] = e.detail;
    console.log(swiper);
  }
</script>

SwiperSlide props

PropTypeDefaultDescription
zoombooleanfalseEnables additional wrapper required for zoom mode
virtualIndexnumberActual swiper slide index. Required to be set for virtual slides

SwiperSlide slot data

SwiperSlide component receives the following data object:

For example:

<Swiper>
  <SwiperSlide let:data={{ isActive }}>
    <div>Current slide is { isActive ? 'active' : 'not active' }</div>
  </SwiperSlide>
</Swiper>

Slots

Swiper Svelte uses "slots" for content distribution. There are 4 slots available

For example:

<Swiper>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <span slot="container-start">Container Start</span>
  <span slot="container-end">Container End</span>
  <span slot="wrapper-start">Wrapper Start</span>
  <span slot="wrapper-end">Wrapper End</span>
</Swiper>

Will be rendered as:

<div class="swiper-container">
  <span slot="container-start">Container Start</span>
  <div class="swiper-wrapper">
    <span slot="wrapper-start">Wrapper Start</span>
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <span slot="wrapper-end">Wrapper End</span>
  </div>
  <span slot="container-end">Container End</span>
</div>

Virtual Slides

To implement Virtual Slides we need to:

<Swiper
  spaceBetween={50}
  slidesPerView={3}
  virtual={{ slides: virtualSlides }}
  let:virtualData={{ slides, offset, from }}
>
  {#each slides as slide, index (from + index)}
    <SwiperSlide
      virtualIndex={from + index}
      style={`left: ${offset}px`}
    >{slide}</SwiperSlide>
  {/each}
</Swiper>
<script>
import SwiperCore, { Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/svelte';

// install Virtual module
SwiperCore.use([Virtual]);

// Create array with 1000 slides
const virtualSlides = Array.from({ length: 1000 }).map((el, index) => `Slide ${index + 1}`);
</script>

Controller

Controller requires to pass one Swiper instance to another:

<!-- Main Swiper -> pass controlled swiper instance -->
<Swiper
  controller={{ control: controlledSwiper }}
  ...
>
  <!-- ... -->
</Swiper>

<!-- Controlled Swiper -> store swiper instance -->
<Swiper
  on:swiper={setControlledSwiper}
  ...
>
  <!-- ... -->
</Swiper>
<script>
  import SwiperCore, { Controller } from '../build/core';
  import { Swiper, SwiperSlide } from '../build/svelte';

  // install Swiper's Controller component
  SwiperCore.use([Controller]);

  // store Controller swiper instance
  let controlledSwiper = null;

  const setControlledSwiper = (e) => {
    const [swiper] = e.detail;
    // set Controller swiper instance
    setTimeout(() => {
      controlledSwiper = swiper;
    });
  };
</script>

For two-way control (when both Swipers control each other) it should be like this:

<Swiper
  on:swiper={setFirstSwiper}
  controller={{ control: secondSwiper }}
  ...
>
  <!-- ... -->
</Swiper>

<Swiper
  on:swiper={setSecondSwiper}
  controller={{ control: firstSwiper }}
  ...
>
  <!-- ... -->
</Swiper>
<script>
  import SwiperCore, { Controller } from '../build/core';
  import { Swiper, SwiperSlide } from '../build/svelte';

  // install Swiper's Controller component
  SwiperCore.use([Controller]);

  // store swiper instances
  let firstSwiper = null;
  let secondSwiper = null;

  const setFirstSwiper = (e) => {
    const [swiper] = e.detail;
    setTimeout(() => {
      firstSwiper = swiper;
    });
  };

  const setSecondSwiper = (e) => {
    const [swiper] = e.detail;
    setTimeout(() => {
      secondSwiper = swiper;
    });
  };
</script>

Thumbs

Same as with controller we need to store thumbs instance and pass it to main gallery:

<!-- Main Swiper -> pass thumbs swiper instance -->
<Swiper
  thumbs={{ swiper: thumbsSwiper }}
  ...
>
  <!-- ... -->
</Swiper>

<!-- Thumbs Swiper -> store swiper instance -->
<!-- It is also required to set watchSlidesVisibility and watchSlidesProgress props -->
<Swiper
  on:swiper={setThumbsSwiper}
  watchSlidesVisibility
  watchSlidesProgress
  ...
>
  <!-- ... -->
</Swiper>

<script>
  import SwiperCore, { Thumbs } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/svelte';

  // install Swiper's Thumbs component
  Swiper.use([Thumbs]);

  // store Thumbs swiper instance
  let thumbsSwiper = null;

  const setThumbsSwiper = (e) => {
    const [swiper] = e.detail;
    // set Thumbs swiper instance
    setTimeout(() => {
      thumbsSwiper = swiper;
    });
  };

</script>

Effects

The following effects are available:

To use effects you have to import and install them first (as all other modules) (Fade example):

import SwiperCore, { EffectFade } from 'swiper';

SwiperCore.use([EffectFade]);

You can find running effect demos here.

Full Fade Effect Example

<Swiper effect="fade">
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>
<script>
import { Swiper, SwiperSlide } from 'swiper/svelte';
import SwiperCore, { EffectFade } from 'swiper';

import 'swiper/swiper.scss';
import 'swiper/components/effect-fade/effect-fade.scss';

SwiperCore.use([EffectFade]);

</script>