スワイパースライダー

Swiper Sliderは、非常に柔軟な設定と多くの機能を備えた、パワフルで最もモダンなタッチスライダーです。

スワイパースライダーのHTMLレイアウト

SwiperのHTMLレイアウトはとてもシンプルです。

<!-- スライダーコンテナ -->
<div class="swiper-container">
    <!-- スライドラッパー -->
    <div class="swiper-wrapper">
        <!-- スライド -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ... other slides ...
    </div>
    <!-- 必要に応じて、ページネーション -->
    <div class="swiper-pagination"></div>
</div>

構造

swiper-container - スライドとページネーションを持つ、メインのスライダーコンテナです。必要な要素
- swiper-wrapper - スライドの追加のラッパーです。必要な要素
  - swiper-slide - 単一のスライド要素です。内部に任意の HTML を含めることができます。
- swiper-pagination - ページネーション用の箇条書きのコンテナです。ページネーションの箇条書きは、自動的に作成されることに注意してください。オプション要素

Swiperアプリのメソッド

さて、Swiper'のHTMLができたら、それを初期化する必要があります。関連するアプリのメソッドを使用する必要があります。

app.swiper.create(swiperEl, parameters)- initialize slider with options

swiperEl - HTMLElementまたはstring (with CSS Selector) of swiper container HTML element. 必須項目です。
parameters - object - Swiperのパラメータを持つオブジェクト。オプションです。
メソッドは初期化されたSwiperインスタンスを返します

app.swiper.destroy(swiperEl)- destroy Swiper instance

swiperEl - HTMLElement または string (with CSS Selector) of swiper container HTML element. 必須項目です。

app.swiper.get(swiperEl)- get Swiper instance by HTML element

swiperEl - HTMLElement または string (with CSS Selector) of swiper container HTML element. 必要です。

例：

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

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

最も関連性の高いAPIパラメータとメソッドについては、Swiper API Websiteを確認してください。

Framework7のバージョンのSwiperには、HistoryとHash Navigationモジュールが含まれていません。

Swiperの自動初期化

Swiper API を使用する必要がなく、Swiper がページの内部にあり、ページの初期化時に DOM に表示される場合は、追加の swiper-init クラスを追加するだけで、自動初期化することができます。

<!-- swiperを自動的に初期化するswiper-init -->
<div class="swiper-container swiper-init">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ... other slides ...
    </div>
</div>

この場合、生成された Swiper インスタンスにアクセスする必要がある場合は、app.swiper.get アプリメソッドを使用できます。

var swiper = app.swiper.get('.swiper-container');

swiper.slideNext();

しかし、Swiperのパラメータについてはどうでしょう。しかし、Swiperのパラメータはどうでしょうか。この場合は、data-属性で渡す必要があります。

キャメルケースで使用されているパラメータ、たとえばslidesPerViewは、data-attributesではdata-slides-per-viewのようにケバブケースで使用する必要があります。

<!-- データアトリビュートでのSwiperプロパティ -->
<div class="swiper-container swiper-init" data-speed="400" data-space-between="40">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ... other slides ...
    </div>
</div>

あるいは、data-swiper属性で、すべてのSwiperパラメータをvalid JSON formatで渡すこともできます。

<!-- data-swiper属性にJSON形式のSwiperプロパティを渡す -->
<div class="swiper-container swiper-init" data-swiper='{"speed":"400", "spaceBetween":"40"}'>
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ... other slides ...
    </div>
</div>

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Swiper</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Default</div>
      <div class="swiper-container swiper-init demo-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
      </div>

      <div class="block-title">1 Slide Per View, 50px Between</div>
      <div
        data-pagination='{"el": ".swiper-pagination"}'
        data-space-between="50"
        class="swiper-container swiper-init demo-swiper"
      >
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
      </div>
      <div class="block-title">2 Slides Per View, 20px Between</div>
      <div
        data-pagination='{"el": ".swiper-pagination"}'
        data-space-between="20"
        data-slides-per-view="2"
        class="swiper-container swiper-init demo-swiper"
      >
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
      </div>
      <div class="block-title">3 Slides Per View, 10px Between</div>
      <div
        data-pagination='{"el": ".swiper-pagination"}'
        data-space-between="10"
        data-slides-per-view="3"
        class="swiper-container swiper-init demo-swiper"
      >
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
      </div>
      <div class="block-title">Auto Slides Per View + Centered</div>
      <div
        data-pagination='{"el": ".swiper-pagination"}'
        data-space-between="10"
        data-slides-per-view="auto"
        data-centered-slides="true"
        class="swiper-container swiper-init demo-swiper demo-swiper-auto"
      >
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
      </div>
      <div class="block-title">Vertical, 10px Between</div>
      <div
        data-pagination='{"el": ".swiper-pagination"}'
        data-space-between="10"
        data-direction="vertical"
        class="swiper-container swiper-init demo-swiper"
      >
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
      </div>
      <div class="block-title">Slow speed</div>
      <div
        data-speed="900"
        data-pagination='{"el": ".swiper-pagination"}'
        data-space-between="50"
        class="swiper-container swiper-init demo-swiper"
      >
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  .demo-swiper .swiper-slide {
    font-size: 25px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #000;
  }

  .demo-swiper .swiper-slide {
    box-sizing: border-box;
    border: 1px solid #ddd;
    background: #fff;
  }

  .demo-swiper {
    margin: 0px 0 35px;
    font-size: 18px;
    height: 120px;
  }

  .demo-swiper.demo-swiper-auto .swiper-slide {
    width: 85%;
  }

  .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(2n) {
    width: 70%;
  }

  .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(3n) {
    width: 30%;
  }
</style>