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

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

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('.swiper-container',{
        navigation:{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    });

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('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
      navigation:{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });

この記事では、swiper の基本的な使用法について説明します。関連コンテンツの詳細については、php 中国語 Web サイトを参照してください。

1. 関連する推奨事項:

シンプルな PHP + MySQL ページング クラス

再帰なしの 2 つのツリー配列コンストラクター

HTML を Excel に変換し、印刷およびダウンロード機能を実現

以上がスワイパーの基本的な使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。