Swiperスライダー

Framework7には、パワフルで最新のタッチスライダーであるSwiperスライダーが搭載されています。非常に柔軟な設定と豊富な機能を備えています。

SwiperスライダーHTMLレイアウト

SwiperのHTMLレイアウトは非常にシンプルです

<!-- Slider container -->
<div class="swiper">
    <!-- Slides wrapper -->
    <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>
    <!-- Pagination, if required -->
    <div class="swiper-pagination"></div>
</div>

内容

swiper - スライドとページネーションを含むメインスライダーコンテナ。必須要素
- swiper-wrapper - スライド用の追加ラッパー。必須要素
  - swiper-slide - 単一スライド要素。任意のHTMLを含めることができます
- swiper-pagination - ページネーションのbulletを含むコンテナ。ページネーションbulletは自動的に作成されます。オプション要素

Swiperアプリメソッド

SwiperのHTMLを作成したら、初期化する必要があります。関連するアプリのメソッドを使用する必要があります

app.swiper.create(swiperEl, parameters)- オプション付きでスライダーを初期化します

swiperEl - HTMLElement または string (CSSセレクター付き) のswiperコンテナHTML要素。必須。
parameters - object - Swiperパラメータを含むオブジェクト。オプション。
メソッドは初期化されたSwiperインスタンスを返します

app.swiper.destroy(swiperEl)- Swiperインスタンスを破棄します

swiperEl - HTMLElement または string (CSSセレクター付き) のswiperコンテナHTML要素。必須。

app.swiper.get(swiperEl)- HTML要素からSwiperインスタンスを取得します

swiperEl - HTMLElement または string (CSSセレクター付き) のswiperコンテナHTML要素。必須。

例

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

Swiper API (パラメータ、メソッド、プロパティ)

最新のAPIパラメータとメソッドについては、Swiper APIウェブサイトを参照してください。

Framework7バージョンのSwiperには、履歴とハッシュナビゲーションモジュールは含まれていません

Swiper要素

Framework7 v8以降、Swiper Elementを使用することを強くお勧めします.HTMLでパラメータを使用してSwiperを定義する方がはるかに簡単で、Swiperカスタム要素はFramework7に既に登録されています.

例

swiper-multiple.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Multiple Swipers</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">1 Slide Per View, 50px Between</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="50">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

    <div class="block-title">2 Slides Per View, 20px Between</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="20" slides-per-view="2">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

    <div class="block-title">3 Slides Per View, 10px Between</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="10" slides-per-view="3">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

    <div class="block-title">Auto Slides Per View + Centered</div>
    <swiper-container pagination class="demo-swiper-multiple demo-swiper-multiple-auto" space-between="10"
      slides-per-view="auto">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>


    <div class="block-title">Vertical, 10px Between</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="10" direction="vertical">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
    </swiper-container>

    <div class="block-title">Slow speed</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="50" speed="900">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

  </div>
</div>

このドキュメントを改善する

このページについて

SwiperスライダーHTMLレイアウト
Swiperアプリメソッド
Swiper API (パラメータ、メソッド、プロパティ)
Swiper要素
例