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)

OR

new Swiper(swiperContainer, parameters)

両方のメソッドは、オプションでスライダーを初期化するために使用されます。

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

swiperContainer -スワイパーコンテナの_HTMLElementまたはstring_であり、必須です。
パラメータ-これらはスワイパーパラメータを持つオブジェクトを含むオプションの要素です。

たとえば-

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

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

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

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

次の表でスワイパーのさまざまな方法と種類を見ることができます-

S.No	Swiper Types & Description
1	Default Swiper With Pagination これは最新のタッチスライダーであり、スワイパーはデフォルトで水平にスワイプします。
2	Vertical Swiper これはデフォルトのスワイパーとしても機能しますが、垂直にスワイプします。
3	With Space Between Slides このスワイパーは、2つのスライド間にスペースを与えるために使用されます。
4	Multiple Swipers このスワイパーは、1ページで複数のスワイパーを使用します。
5	Nested Swipers これは、垂直スライドと水平スライドの組み合わせです。
6	Custom Controls カスタムコントロールがスライドを選択またはスワイプするために使用されます。
7	Lazy Loading ロードに時間がかかるマルチメディアファイルに使用できます。

Framework7-swiper-slider

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

説明