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.