Swiper Svelte is available only via NPM as a part of the main Swiper library:
npm i swiper
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 moduleKeyboard
- Keyboard Control moduleMousewheel
- Mousewheel Control moduleNavigation
- Navigation modulePagination
- Pagination moduleScrollbar
- Scrollbar moduleParallax
- Parallax moduleZoom
- Zoom moduleLazy
- Lazy moduleController
- Controller moduleA11y
- Accessibility moduleHistory
- History Navigation moduleHashNavigation
- Hash Navigation moduleAutoplay
- Autoplay moduleEffectFade
- Fade Effect moduleEffectCube
- Cube Effect moduleEffectFlip
- Flip Effect moduleEffectCoverflow
- Coverflow Effect moduleThumbs
- 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>
navigation.nextEl
, pagination.el
, etc.)Swiper package contains different sets of CSS, Less and SCSS 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 minifiedLess styles are separate styles for core version and modules:
swiper.less
- only core Swiper stylescomponents/a11y/a11y.less
- styles required for A11y modulecomponents/controller/controller.less
- styles required for Controller modulecomponents/effect-coverflow/effect-coverflow.less
- styles required for Coveflow Effect modulecomponents/effect-cube/effect-cube.less
- styles required for Cube Effect modulecomponents/effect-fade/effect-fade.less
- styles required for Fade Effect modulecomponents/effect-flip/effect-flip.less
- styles required for Flip Effect modulecomponents/lazy/lazy.less
- styles required for Lazy modulecomponents/navigation/navigation.less
- styles required for Navigation modulecomponents/pagination/pagination.less
- styles required for Pagination modulecomponents/scrollbar/scrollbar.less
- styles required for Scrollbar modulecomponents/thumbs/thumbs.less
- styles required for Thumbs modulecomponents/zoom/zoom.less
- styles required for Zoom moduleSCSS styles are also separate styles for core version and modules:
swiper.scss
- only core Swiper stylescomponents/a11y/a11y.scss
- styles required for A11y modulecomponents/controller/controller.scss
- styles required for Controller modulecomponents/effect-coverflow/effect-coverflow.scss
- styles required for Coveflow Effect modulecomponents/effect-cube/effect-cube.scss
- styles required for Cube Effect modulecomponents/effect-fade/effect-fade.scss
- styles required for Fade Effect modulecomponents/effect-flip/effect-flip.scss
- styles required for Flip Effect modulecomponents/lazy/lazy.scss
- styles required for Lazy modulecomponents/navigation/navigation.scss
- styles required for Navigation modulecomponents/pagination/pagination.scss
- styles required for Pagination modulecomponents/scrollbar/scrollbar.scss
- styles required for Scrollbar modulecomponents/thumbs/thumbs.scss
- styles required for Thumbs modulecomponents/zoom/zoom.scss
- styles required for Zoom moduleSwiper
Svelte component receive all Swiper parameters as component props.
<Swiper
slidesPerView="{3}"
spaceBetween="{50}"
navigation
pagination
...
></Swiper>
Swiper component supports all Swiper events, including additional swiper
event that returns swiper instance as soon as posible.
event.detail
. <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>
Prop | Type | Default | Description |
---|---|---|---|
zoom | boolean | false | Enables additional wrapper required for zoom mode |
virtualIndex | number | Actual swiper slide index. Required to be set for virtual slides |
SwiperSlide
component receives the following data
object:
isActive
- true when current slide is activeisPrev
- true when current slide is the previous from activeisNext
- true when current slide is the next from activeisVisible
- 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>
Swiper Svelte uses "slots" for content distribution. There are 4 slots available
container-start
- element will be added to the beginning of swiper-containercontainer-end
- element will be added to the end of swiper-containerwrapper-start
- element will be added to the beginning of swiper-wrapperwrapper-end
- element will be added to the end of swiper-wrapperFor 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>
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 pxfrom
- index of first slide required to be renderedto
- index of last slide required to be renderedslides
- 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 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>
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>
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.
<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>