Swiper'dan geçiş
Swiper kurulumlarının çoğu satır satır çevrilir ve birçok Swiper ayar adı takma ad olarak kabul edilir.
İşaretleme
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: sarmalayıcı yok, navigasyon işaretlemesi yok -->
<div data-insigne>
<div>…</div>
<div>…</div>
</div>Ayarlar
| Swiper | Insigne | Not |
|---|---|---|
slidesPerView | slidesPerView | aynı |
spaceBetween | spaceBetween (takma ad gap) | aynı |
centeredSlides | centered | takma ad kabul edilir |
loop: true | loop: 'loop' | true kabul edilir; kopya slayt yok |
rewind: true | loop: 'rewind' | |
initialSlide | startIndex | takma ad kabul edilir |
speed | speed | aynı |
effect: 'fade' | 'cube' | 'coverflow' | 'flip' | 'cards' | 'creative' | aynı adlar | + 21 CSS ve 13 WebGL efekt |
creativeEffect: { prev, next } | creative: { prev, next } | aynı yapı |
autoplay: { delay, disableOnInteraction, pauseOnMouseEnter, reverseDirection, stopOnLastSlide } | autoplay: süre, stopOnInteraction, pauseOnHover, reverse, stopOnLast | düz ayarlar |
navigation: { nextEl, prevEl } | arrows: 'visible' | dahili |
pagination: { type: 'bullets' | 'fraction' | 'progressbar' } | pagination: 'dots' | 'fraction' | 'progress' | dahili |
breakpoints (pencere genişliği) | breakpoints (slider genişliği) | konteyner tabanlı |
direction | direction | aynı |
freeMode, mousewheel, keyboard | aynı | |
autoHeight: true | height: 'content' | takma ad kabul edilir |
parallax + data-swiper-parallax | parallax + data-parallax | ayrıca -opacity, -scale |
thumbs: { swiper } | thumbs: '#secici' | |
lazy / loading="lazy" | data-src + lazy | aktif slaytın çevresinde yükler |
a11y modülü | dahili |
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 (her zaman gerçek indeks) |
swiper.autoplay.start() / stop() | slider.play() / pause() |
swiper.on('slideChange', fn) | slider.on('change', fn) |
swiper.update() | slider.refresh() (çocuklar değişince otomatik) |
swiper.params.x = …; swiper.update() | slider.update({ x }) |
swiper.destroy() | slider.destroy() |
Ücretsiz gelenler
Katman animasyonları, smart fit, WebGL geçişler, konteyner kırılımları, minSlideWidth, height: "image", overlay'ler ve parçacıklar; hiçbiri ek işaretleme gerektirmez.