Framework7 - Swiper Kaydırıcısı

Açıklama

Kaydırıcı kaydırıcı, en güçlü ve modern dokunmatik kaydırıcıdır ve birçok özellikle birlikte Framework7'ye gelir.

Aşağıdaki HTML düzeni, kaydırıcı kaydırıcısını gösterir -

<!-- Container class for slider -->
<div class = "swiper-container">
   <!-- Wrapper class for slider -->
   <div class = "swiper-wrapper">
      <!-- Slides -->
      <div class = "swiper-slide">Slide 1</div>
      <div class = "swiper-slide">Slide 2</div>
      <div class = "swiper-slide">Slide 3</div>
      ... other slides ...
   </div>
   
   <!-- Define pagination, if it is required -->
   <div class = "swiper-pagination"></div>
</div>

Aşağıdaki sınıflar kaydırıcı kaydırıcı için kullanılır -

  • swiper-container - Ana kaydırıcı konteyner için gerekli bir elemandır ve slaytlar ve sayfalandırmalar için kullanılır.

  • Swiper-wrapper - Ek sarma slaytları için gerekli bir unsurdur.

  • swiper-slide - Tek bir slayt öğesidir ve içinde herhangi bir HTML içerebilir.

  • swiper-pagination - Sayfalandırma madde işaretleri için isteğe bağlıdır ve bunlar otomatik olarak oluşturulur.

Swiper'ı, ilgili yöntemlerini kullanarak JavaScript ile başlatabilirsiniz -

myApp.swiper(swiperContainer,parameters)

VEYA

new Swiper(swiperContainer, parameters)

Her iki yöntem de kaydırıcıyı seçeneklerle başlatmak için kullanılır.

Yukarıda verilen yöntemler aşağıdaki parametreleri içerir -

  • swiperContainer- Bu HTMLElement veya bir silici kabının dizesidir ve gereklidir.

  • parameters - Bunlar, swiper parametreli nesne içeren isteğe bağlı öğelerdir.

Örneğin -

var mySwiper = app.swiper('.swiper-container', {
   speed: 400,
   spaceBetween: 100
});

Bir kaydırıcının örneğine erişmek mümkündür ve kaydırıcının kabının swiper özelliği aşağıdaki HTML öğesine sahiptir -

var mySwiper = $$('.swiper-container')[0].swiper;

// Here you can use all slider methods like:
mySwiper.slideNext();

Aşağıdaki tabloda farklı süpürme yöntemlerini ve türlerini görebilirsiniz -

S.No Swiper Türleri ve Tanımı
1 Sayfalandırmalı Varsayılan Swiper

Bu modern bir dokunmatik kaydırıcıdır ve kaydırıcı varsayılan olarak yatay olarak kaydırır.

2 Dikey Swiper

Bu aynı zamanda varsayılan bir kaydırıcı olarak da çalışır, ancak dikey olarak kaydırılır.

3 Slaytlar Arası Boşluklu

Bu kaydırıcı, iki slayt arasında boşluk bırakmak için kullanılır.

4 Birden Çok Kaydırıcı

Bu kaydırıcı, tek bir sayfada birden fazla kaydırıcı kullanır.

5 Yuvalanmış Swipers

Dikey ve yatay kızakların birleşimidir.

6 Özel Kontroller

Herhangi bir slaydı seçmek veya kaydırmak için özel kontroller için kullanılır.

7 Yavaş yüklenme

Yüklenmesi zaman alan multimedya dosyası için kullanılabilir.