Framework7 - Swiper Slider

Deskripsi

Penggeser gesek adalah penggeser sentuh paling kuat dan modern dan hadir di Framework7 dengan banyak fitur.

Tata letak HTML berikut menunjukkan penggeser gesek -

<!-- 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>

Kelas berikut digunakan untuk slider swiper -

swiper-container - Ini adalah elemen yang diperlukan untuk wadah slider utama dan digunakan untuk slide dan paginasi.
Swiper-wrapper - Ini adalah elemen yang diperlukan untuk slide pembungkus tambahan.
swiper-slide - Ini adalah elemen slide tunggal dan dapat berisi HTML apa pun di dalamnya.
swiper-pagination - Ini opsional untuk poin pagination dan dibuat secara otomatis.

Anda dapat menginisialisasi swiper dengan JavaScript menggunakan metode terkait -

myApp.swiper(swiperContainer,parameters)

ATAU

new Swiper(swiperContainer, parameters)

Kedua metode tersebut digunakan untuk menginisialisasi slider dengan opsi.

Metode yang diberikan di atas berisi parameter berikut -

swiperContainer- Ini adalah HTMLElement atau string dari wadah penyapu dan diperlukan.
parameters - Ini adalah elemen opsional yang berisi objek dengan parameter swiper.

Misalnya -

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

Dimungkinkan untuk mengakses instance swiper dan properti swiper dari wadah slider memiliki elemen HTML berikut -

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

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

Anda dapat melihat berbagai cara dan jenis swiper di tabel berikut -

S.No	Jenis & Deskripsi Swiper
1	Swiper Default Dengan Pagination Ini adalah penggeser sentuh modern dan gesekan gesek secara horizontal, secara default.
2	Penyapu Vertikal Yang ini juga berfungsi sebagai swiper default tetapi menggesek secara vertikal.
3	Dengan Spasi Antar Slides Swiper ini digunakan untuk memberi jarak antara dua slide.
4	Beberapa Swiper Gesek ini menggunakan lebih dari satu gesekan pada satu halaman.
5	Swiper Bersarang Ini adalah kombinasi slide vertikal dan horizontal.
6	Kontrol Kustom Ini digunakan untuk kontrol khusus untuk memilih atau menggesek slide apa pun.
7	Pemuatan Lambat Ini dapat digunakan untuk file multimedia, yang membutuhkan waktu untuk memuat.