Framework7 - Swiper 滑塊

描述

Swiper 滑塊是最強大、最現代的觸控滑塊，它在 Framework7 中具有許多功能。

下面的 HTML 佈局顯示了 Swiper 滑塊：

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

Swiper 滑塊使用以下類：

• swiper-container - 這是主滑塊容器的必需元素，用於容納滑塊和分頁。

• swiper-wrapper - 這是額外包裝滑塊的必需元素。

• swiper-slide - 這是一個單個滑塊元素，可以在其中包含任何 HTML 內容。

• swiper-pagination - 這是可選的分頁點，會自動建立。

您可以使用相關的 JavaScript 方法初始化 Swiper：

myApp.swiper(swiperContainer,parameters)

或者

new Swiper(swiperContainer, parameters)

這兩種方法都用於使用選項初始化滑塊。

上述方法包含以下引數：

• swiperContainer - 這是HTMLElement 或字串，表示 Swiper 容器，是必需的。

• parameters - 這些是可選元素，包含帶有 Swiper 引數的物件。

例如：

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

可以訪問 Swiper 例項，滑塊容器的swiper屬性具有以下 HTML 元素：

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

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

您可以在下表中看到不同型別的 Swiper：