スワイパーの基本的な使い方-htmlチュートリアル-php.cn

スワイパーの基本的な使い方

jacklove

リリース： 2018-06-11 23:42:14

オリジナル

7250 人が閲覧しました

スワイパーとは何ですか？

swiper は、PC だけでなく、モバイルデバイス向けにも設計された軽量のカルーセル画像プラグインです。これを使用して、カルーセル画像をすばやく作成したり、拡張して複雑なカルーセル効果を作成したりできます。

基本的な使用法

Swiper を使用するには 2 つのファイルが必要です。1 つはこのスライディングカルーセルプラグインでよく使用されるスタイルを指定する swiper.css です。もちろん、必要に応じて独自のスタイルを定義することもできます。もう 1 つは swiper です。 js これがプラグインの主要部分です。
これら 2 つのファイルをページに導入した後、まず基本的な HTML 構造を記述する必要があります
以下の使用方法はすべて swiper 4 に基づいています。、ウィンドウ、swiper-wrapper は、特定の順序で配置されたすべてのカルーセル画像のコレクションです。デフォルトでは左右に配置されており、マウスやタッチスクリーンを操作すると要素の位置が変更され、ホイールに到達します。 swiper-slide は各カルーセル要素です。基本的な HTML 構造を記述した後、カルーセルを初期化する必要があります

  <p class="swiper-container">
    <p class="swiper-wrapper">
      <p class="swiper-slide">Slide 1</p>
      <p class="swiper-slide">Slide 2</p>
      <p class="swiper-slide">Slide 3</p>
      <p class="swiper-slide">Slide 4</p>
      <p class="swiper-slide">Slide 5</p>
      <p class="swiper-slide">Slide 6</p>
      <p class="swiper-slide">Slide 7</p>
      <p class="swiper-slide">Slide 8</p>
      <p class="swiper-slide">Slide 9</p>
      <p class="swiper-slide">Slide 10</p>
    </p>
  </p>

ログイン後にコピー

これにより、マウスまたはタッチスクリーンのスライドで左右に移動できるデフォルトのカルーセルが生成されます

ページングとナビゲーションを追加します

ほとんどのカルーセルにはページングとナビゲーションがあり、ユーザーに現在位置を確認させ、これがインタラクティブな部分であることを知らせることができます。ページングを追加する方法も非常に簡単です。オプションを追加するだけです。初期化時にページング要素を指定するには、swiper-container の下に「次へ」ボタンと「前へ」ボタンを追加します。ここでは、swiper-button-next と swiper-button-prev の両方が含まれています。次のボタンは垂直方向の中央で右に配置され、前のボタンは垂直方向の中央で右に配置されます。もちろん、ボタンを自分で指定することもできます。

<script>
    var swiper = new Swiper(&#39;.swiper-container&#39;);</script>

ログイン後にコピー

初期化関数にボタン要素を追加します。

このようにして、ナビゲーションボタンを備えたカルーセルを生成できます

ページングを追加する方法はナビゲーションボタンと非常に似ています
html:

    <p class="swiper-container">
        <p class="swiper-wrapper">...</p>
          <p class="swiper-button-next"></p>
          <p class="swiper-button-prev"></p>
    </p>

ログイン後にコピー

初期化中にページング要素を追加します

js:

    var swiper = new Swiper(&#39;.swiper-container&#39;,{
        navigation:{
            nextEl: &#39;.swiper-button-next&#39;,
            prevEl: &#39;.swiper-button-prev&#39;,
        }
    });

ログイン後にコピー

Thisページネーションとナビゲーションを備えたカルーセルチャートを生成できます

ループと自動カルーセル:

js:
初期化中にスワイパーの基本的な使い方

  <p class="swiper-container">
    <p class="swiper-wrapper">
        ...    </p>
    <!-- 分页 -->
    <p class="swiper-pagination"></p>
    <!--导航按钮-->
    <p class="swiper-button-next"></p>
    <p class="swiper-button-prev"></p>
  </p>

ログイン後にコピー

その他の共通属性を追加します

ページネーションはプログレスバーに置き換えられます

    var swiper = new Swiper(&#39;.swiper-container&#39;, {
      pagination: {
        el: &#39;.swiper-pagination&#39;,
      },
      navigation:{
        nextEl: &#39;.swiper-button-next&#39;,
        prevEl: &#39;.swiper-button-prev&#39;,
      }
    });

ログイン後にコピー