Migrating from Swiper
Most Swiper setups translate line by line, and several Swiper option names are accepted as aliases.
Markup
html
<!-- Swiper -->
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">…</div>
<div class="swiper-slide">…</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- Insigne: no wrapper, no navigation markup -->
<div data-insigne>
<div>…</div>
<div>…</div>
</div>Options
| Swiper | Insigne | Note |
|---|---|---|
slidesPerView | slidesPerView | same |
spaceBetween | spaceBetween (alias gap) | same |
centeredSlides | centered | alias accepted |
loop: true | loop: 'loop' | true accepted; no cloned slides |
rewind: true | loop: 'rewind' | |
initialSlide | startIndex | alias accepted |
speed | speed | same |
effect: 'fade' | 'cube' | 'coverflow' | 'flip' | 'cards' | 'creative' | same names | + 21 CSS and 13 WebGL effects |
creativeEffect: { prev, next } | creative: { prev, next } | same shape |
autoplay: { delay, disableOnInteraction, pauseOnMouseEnter, reverseDirection, stopOnLastSlide } | autoplay: delay, stopOnInteraction, pauseOnHover, reverse, stopOnLast | flat options |
navigation: { nextEl, prevEl } | arrows: 'visible' | built in |
pagination: { type: 'bullets' | 'fraction' | 'progressbar' } | pagination: 'dots' | 'fraction' | 'progress' | built in |
breakpoints (window width) | breakpoints (slider width) | container-based |
direction | direction | same |
freeMode, mousewheel, keyboard | same | |
autoHeight: true | height: 'content' | alias accepted |
parallax + data-swiper-parallax | parallax + data-parallax | also -opacity, -scale |
thumbs: { swiper } | thumbs: '#selector' | |
lazy / loading="lazy" | data-src + lazy | loads around the active slide |
a11y module | built in |
API
| Swiper | Insigne |
|---|---|
new Swiper('.swiper', opts) | new InsigneSlider('#el', opts) |
swiper.slideNext() / slidePrev() | slider.next() / prev() |
swiper.slideTo(i) | slider.goTo(i) |
swiper.activeIndex / realIndex | slider.index (always the real index) |
swiper.autoplay.start() / stop() | slider.play() / pause() |
swiper.on('slideChange', fn) | slider.on('change', fn) |
swiper.update() | slider.refresh() (automatic when children change) |
swiper.params.x = …; swiper.update() | slider.update({ x }) |
swiper.destroy() | slider.destroy() |
What you get for free
Layer animations, smart fit, WebGL transitions, container breakpoints, minSlideWidth, height: "image", overlays and particles — none of which needs extra markup.