Swiper SolidJS is available only via NPM as a part of the main Swiper library:
npm i swiper
swiper/solid
exports 2 components: Swiper
and SwiperSlide
:
// Import Swiper SolidJS components
import { Swiper, SwiperSlide } from 'swiper/solid';
// Import Swiper styles
import 'swiper/css';
export default () => {
return (
<Swiper
spaceBetween={50}
slidesPerView={3}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
...
</Swiper>
);
};
Virtual
- Virtual Slides moduleKeyboard
- Keyboard Control moduleMousewheel
- Mousewheel Control moduleNavigation
- Navigation modulePagination
- Pagination moduleScrollbar
- Scrollbar moduleParallax
- Parallax moduleFreeMode
- Free Mode moduleGrid
- Grid moduleManipulation
- Slides manipulation module (only for Core version)Zoom
- 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 moduleEffectCards
- Cards Effect moduleEffectCreative
- Creative Effect moduleThumbs
- Thumbs module// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/solid';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
export default () => {
return (
<Swiper
// install Swiper modules
modules={[Navigation, Pagination, Scrollbar, A11y]}
spaceBetween={50}
slidesPerView={3}
navigation
pagination={{ clickable: true }}
scrollbar={{ draggable: true }}
onSwiper={(swiper) => console.log(swiper)}
onSlideChange={() => console.log('slide change')}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
...
</Swiper>
);
};
navigation.nextEl
, pagination.el
, etc.)Swiper package contains different sets of CSS, Less and SCSS styles:
swiper/css
- only core Swiper stylesswiper/css/bundle
- all Swiper styles including all modules styles (like Navigation, Pagination, etc.)Modules styles (not required if you already imported bundle styles):
swiper/css/a11y
- styles required for A11y moduleswiper/css/autoplay
- styles required for Autoplay moduleswiper/css/controller
- styles required for Controller moduleswiper/css/effect-cards
- styles required for Cards Effect moduleswiper/css/effect-coverflow
- styles required for Coverflow Effect moduleswiper/css/effect-creative
- styles required for Creative Effect moduleswiper/css/effect-cube
- styles required for Cube Effect moduleswiper/css/effect-fade
- styles required for Fade Effect moduleswiper/css/effect-flip
- styles required for Flip Effect moduleswiper/css/free-mode
- styles required for Free Mode moduleswiper/css/grid
- styles required for Grid moduleswiper/css/hash-navigation
- styles required for Hash Navigation moduleswiper/css/history
- styles required for History moduleswiper/css/keyboard
- styles required for Keyboard moduleswiper/css/lazy
- styles required for Lazy moduleswiper/css/manipulation
- styles required for Manipulation moduleswiper/css/mousewheel
- styles required for Mousewheel moduleswiper/css/navigation
- styles required for Navigation moduleswiper/css/pagination
- styles required for Pagination moduleswiper/css/parallax
- styles required for Parallax moduleswiper/css/scrollbar
- styles required for Scrollbar moduleswiper/css/thumbs
- styles required for Thumbs moduleswiper/css/virtual
- styles required for Virtual moduleswiper/css/zoom
- styles required for Zoom moduleFor Less styles replace css
with less
in imports paths, e.g.:
import 'swiper/less';
import 'swiper/less/navigation';
import 'swiper/less/pagination';
For SCSS styles replace css
with scss
in imports paths, e.g.:
import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';
Swiper
SolidJS component receive all Swiper parameters as component props, plus some extra props:
Prop | Type | Default | Description |
---|---|---|---|
tag | string | 'div' | Main Swiper container HTML element tag |
wrapperTag | string | 'div' | Swiper wrapper HTML element tag |
onSwiper | (swiper) => void | 'div' | Callback that receives Swiper instance |
Also it supports all Swiper events in on{Eventname}
format. For example slideChange
event becomes onSlideChange
prop:
<Swiper
onSlideChange={() => {/*...*/}}
onReachEnd={() => {/*...*/}}
...
>
Prop | Type | Default | Description |
---|---|---|---|
tag | string | 'div' | Swiper Slide HTML element tag |
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 can accept render function that receives an object with the following properties:
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 (watchSlidesProgress
Swiper parameter must be enabled)isDuplicate
- true when current slide is a duplicate slide (when loop
mode enabled)
For example:<Swiper>
<SwiperSlide>
{({ isActive }) => (
<div>Current slide is {isActive ? 'active' : 'not active'}</div>
)}
</SwiperSlide>
</Swiper>
Swiper SolidJS provides useSwiper
hook to easliy get the Swiper instance in components inside of Swiper:
// some-inner-component.jsx
import { useSwiper } from 'swiper/solid';
export default function SlideNextButton() {
const swiper = useSwiper();
return (
<button onClick={() => swiper.slideNext()}>Slide to the next slide</button>
);
}
useSwiperSlide
is one more hook for components inside of Swiper slides to get the slide data (same data as in SwiperSlide render function)
// some-inner-component.jsx
import { useSwiperSlide } from 'swiper/solid';
export default function SlideTitle() {
const swiperSlide = useSwiperSlide();
return (
<p>Current slide is {swiperSlide.isActive ? 'active' : 'not active'}</p>
);
}
Swiper SolidJS uses "slots" for content distribution. There are 4 slots available
container-start
- element will be added to the beginning of swiper-containercontainer-end
(default) - 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">
<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 rendering here is fully handled by SolidJS and not required anything except setting virtual:true
property and setting virtualIndex
on slides:
import { Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/solid';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/virtual';
export default () => {
// Create array with 1000 slides
const slides = Array.from({ length: 1000 }).map(
(el, index) => `Slide ${index + 1}`
);
return (
<Swiper modules={[Virtual]} spaceBetween={50} slidesPerView={3} virtual>
{slides.map((slideContent, index) => (
<SwiperSlide key={slideContent} virtualIndex={index}>
{slideContent}
</SwiperSlide>
))}
</Swiper>
);
};
Controller requires to pass one Swiper instance to another:
import { createSignal } from 'solid';
import { Controller } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/solid';
const App = () => {
// store controlled swiper instance
const [controlledSwiper, setControlledSwiper] = createSignal(null);
return (
<main>
{/* Main Swiper -> pass controlled swiper instance */}
<Swiper modules={[Controller]} controller={{ control: controlledSwiper() }} ...>
{/* ... */}
</Swiper>
{/* Controlled Swiper -> store swiper instance */}
<Swiper modules={[Controller]} onSwiper={setControlledSwiper} ...>
{/* ... */}
</Swiper>
</main>
)
}
For two-way control (when both Swipers control each other) it should be like this:
import { createSignal } from 'solid';
import { Controller } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/solid';
const App = () => {
// store swiper instances
const [firstSwiper, setFirstSwiper] = createSignal(null);
const [secondSwiper, setSecondSwiper] = createSignal(null);
return (
<main>
<Swiper
modules={[Controller]}
onSwiper={setFirstSwiper}
controller={{ control: secondSwiper() }}
>
{/* ... */}
</Swiper>
<Swiper
modules={[Controller]}
onSwiper={setSecondSwiper}
controller={{ control: firstSwiper() }}
>
{/* ... */}
</Swiper>
</main>
);
};
Same as with controller we need to store thumbs instance and pass it to main gallery:
import { createSignal } from 'solid';
import { Swiper, SwiperSlide } from 'swiper/solid';
import { Thumbs } from 'swiper';
const App = () => {
// store thumbs swiper instance
const [thumbsSwiper, setThumbsSwiper] = createSignal(null);
return (
<main>
{/* Main Swiper -> pass thumbs swiper instance */}
<Swiper modules={[Thumbs]} thumbs={{ swiper: thumbsSwiper() }} ...>
{/* ... */}
</Swiper>
{/* Thumbs Swiper -> store swiper instance */}
{/* It is also required to set watchSlidesProgress prop */ }
<Swiper
modules={[Thumbs]}
watchSlidesProgress
onSwiper={setThumbsSwiper}
...
>
{/* ... */}
</Swiper>
</main>
)
}
The following effects are available:
- Fade
- Cube
- Coverflow
- Flip
- Cards
- Creative
To use effects you have to import and install them first (as all other modules).
You can find running effect demos here.
import { Swiper, SwiperSlide } from 'swiper/solid';
import { EffectFade } from 'swiper';
import 'swiper/css';
import 'swiper/css/effect-fade';
export default () => {
return (
<Swiper modules={[EffectFade]} effect="fade">
{[1, 2, 3].map((i, el) => {
return <SwiperSlide>Slide {el}</SwiperSlide>;
})}
</Swiper>
);
};
As you see it is really easy to integrate Swiper into your website or app. So here are your next steps:
Go to API Documentation to learn more about all Swiper API and how to control it.
If you have questions about Swiper ask them in StackOverflow or Swiper Discussions.
Create issue on GitHub if you found a bug.
If you are looking for support, we have a private Discord support chat room for Swiper Patrons.