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>

• Virtual - Virtual Slides module
• Keyboard - Keyboard Control module
• Mousewheel - Mousewheel Control module
• Navigation - Navigation module
• Pagination - Pagination module
• Scrollbar - Scrollbar module
• Parallax - Parallax module
• Zoom - Zoom module
• Lazy - Lazy module
• Controller - Controller module
• A11y - Accessibility module
• History - History Navigation module
• HashNavigation - Hash Navigation module
• Autoplay - Autoplay module
• EffectFade - Fade Effect module
• EffectCube - Cube Effect module
• EffectFlip - Flip Effect module
• EffectCoverflow - Coverflow Effect module
• Thumbs - Thumbs module

  <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 modules
  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 modules
  SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

  </script>

Styles

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

CSS Styles

CSS styles available only for bundle version:

• swiper-bundle.css - all Swiper styles including all modules styles (like Navigation, Pagination, etc.)
• swiper-bundle.min.css - same as previous but minified

Less Styles

Less styles are separate styles for core version and modules:

• swiper.less - only core Swiper styles
• components/a11y/a11y.less - styles required for A11y module
• components/controller/controller.less - styles required for Controller module
• components/effect-coverflow/effect-coverflow.less - styles required for Coveflow Effect module
• components/effect-cube/effect-cube.less - styles required for Cube Effect module
• components/effect-fade/effect-fade.less - styles required for Fade Effect module
• components/effect-flip/effect-flip.less - styles required for Flip Effect module
• components/lazy/lazy.less - styles required for Lazy module
• components/navigation/navigation.less - styles required for Navigation module
• components/pagination/pagination.less - styles required for Pagination module
• components/scrollbar/scrollbar.less - styles required for Scrollbar module
• components/thumbs/thumbs.less - styles required for Thumbs module
• components/zoom/zoom.less - styles required for Zoom module

SCSS Styles

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

• swiper.scss - only core Swiper styles
• components/a11y/a11y.scss - styles required for A11y module
• components/controller/controller.scss - styles required for Controller module
• components/effect-coverflow/effect-coverflow.scss - styles required for Coveflow Effect module
• components/effect-cube/effect-cube.scss - styles required for Cube Effect module
• components/effect-fade/effect-fade.scss - styles required for Fade Effect module
• components/effect-flip/effect-flip.scss - styles required for Flip Effect module
• components/lazy/lazy.scss - styles required for Lazy module
• components/navigation/navigation.scss - styles required for Navigation module
• components/pagination/pagination.scss - styles required for Pagination module
• components/scrollbar/scrollbar.scss - styles required for Scrollbar module
• components/thumbs/thumbs.scss - styles required for Thumbs module
• components/zoom/zoom.scss - styles required for Zoom module

Swiper props

Swiper Svelte component receive all Swiper parameters as component props.

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

Swiper events

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

  <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

SwiperSlide slot data

SwiperSlide component receives the following data object:

• isActive - true when current slide is active
• isPrev - true when current slide is the previous from active
• isNext - true when current slide is the next from active
• isVisible - true when current slide is visible (watchSlidesVisibility Swiper parameter must be enabled)
• isDuplicate - true when current slide is a duplicate slide (when loop mode enabled) 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

• container-start - element will be added to the beginning of swiper-container
• container-end - element will be added to the end of swiper-container
• wrapper-start - element will be added to the beginning of swiper-wrapper
• wrapper-end - element will be added to the end of swiper-wrapper

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:

• pass array with slides to Swiper's virtual.slides property

• render slides based on virtualData slot's data. It is also mandatory to pass virtualIndex. virtualData is the object with 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 - slides to render

  <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 'swiper/core';
    import { Swiper, SwiperSlide } from 'swiper/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 'swiper/core';
    import { Swiper, SwiperSlide } from 'swiper/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 { Swiper, SwiperSlide } from 'swiper/svelte';
    import SwiperCore, { Thumbs } from 'swiper/core';

    // install Swiper's Thumbs component
    SwiperCore.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:

- Fade
- Cube
- Overflow
- Flip

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>