Framework7-スワイパースライダー

説明

スワイパースライダーは最も強力で最新のタッチスライダーであり、多くの機能を備えたFramework7に組み込まれています。

次のHTMLレイアウトは、スワイパースライダーを示しています-

<!-- 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-container −メインスライダーコンテナに必須の要素であり、スライドやページ付けに使用されます。

• Swiper-wrapper −追加のラッパースライドに必要な要素です。

• swiper-slide −これは単一のスライド要素であり、内部に任意のHTMLを含めることができます。

• swiper-pagination −ページ付けの箇条書きではオプションであり、それらは自動的に作成されます。

関連するメソッドを使用して、JavaScriptでスワイパーを初期化できます-

myApp.swiper(swiperContainer,parameters)

または

new Swiper(swiperContainer, parameters)

どちらの方法も、オプションを使用してスライダーを初期化するために使用されます。

上記のメソッドには、次のパラメータが含まれています-

• swiperContainer− HTMLElementまたはスワイパーコンテナの文字列であり、必須です。

• parameters −これらは、スワイパーパラメーターを持つオブジェクトを含むオプションの要素です。

例-

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

スワイパーのインスタンスにアクセスすることが可能であり、スライダーのコンテナーのスワイパープロパティには次のHTML要素があります-

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

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

次の表で、スワイパーのさまざまな方法とタイプを確認できます。

S.No	スワイパーの種類と説明
1	ページネーション付きのデフォルトのスワイパー これは最新のタッチスライダーであり、デフォルトではスワイパーが水平方向にスワイプします。
2	垂直スワイパー これはデフォルトのスワイパーとしても機能しますが、垂直方向にスワイプします。
3	スライドの間にスペースがある このスワイパーは、2つのスライドの間にスペースを与えるために使用されます。
4	複数のスワイパー このスワイパーは、1ページに複数のスワイパーを使用します。
5	ネストされたスワイパー これは、垂直スライドと水平スライドの組み合わせです。
6	カスタムコントロール スライドを選択またはスワイプするカスタムコントロールに使用されます。
7	遅延読み込み 読み込みに時間がかかるマルチメディアファイルに使用できます。