モバイル h5 カルーセル プラグインのスワイプ例の詳細な説明

swipe.js は、軽量の js タッチ スライディング クラス ライブラリ、Swipe JS です。これは非常に小さな JavaScript クラス ライブラリですが、その機能は単純ではありません。Web ページ上のあらゆるコンテンツを表示するために使用でき、正確なタッチ移動操作をサポートし、自動再生や比例拡大縮小なども設定できます。 。

モバイル H5 ページでは、多くの効果が必要ない場合、単純な指のスライドと自動回転効果だけを必要とする場合は、スワイプ プラグインの方が好きですが、これは Baidu の検索で見つかりました。プラグインの説明は十分ではありませんが、必要な機能を追加します。

スワイプ機能の紹介

以下では、Swipe JS の使用方法を紹介します。基本的な関数メソッドを理解したら、それらの使用方法を見てみましょう。

最初にHTML構造:

startSlide: 4,  //起始图片切换的索引位置
auto: 3000, //设置自动切换时间，单位毫秒
continuous: true,  //无限循环的图片切换效果
disableScroll: true,  //阻止由于触摸而滚动屏幕
stopPropagation: false,  //停止滑动事件
callback: function(index, element) {},  //回调函数，切换时触发
transitionEnd: function(index, element) {}  //回调函数，切换结束调用该函数。

次にスタイルコード:

prev()：上一页
next()：下一页
getPos()：获取当前页的索引
getNumSlides()：获取所有项的个数
slide(index, duration)：滑动方法

最後にJSバインディングとパラメータ設定を設定します:

<p id="slider" class="swipe">
  <p class="swipe-wrap">
    <p></p>
    <p></p>
    <p></p>
  </p>
</p>

ここで、上で紹介した関数パラメータが記述されている限り、対応する関数は次のようになります。達成 。

最後に、スライド スイッチに上下のボタンを追加することもできます:

.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > figure {
    float: left;
    width: 100%;
    position: relative;
}

さらに、いくつかのページネーター効果を追加します:

その時点でページングの効果が必要な場合は、次のようなコードを追加できます。

nav タグ部分はページングです ブラウザの関連部分をプルし、スライドと同じ数の li タグを付けます (ページネーター効果が必要な場合は、nav タグと ul タグを追加するだけです。li タグはページング ポイントを表すためです)ホイールを動的に追加する場合は動的に生成する必要があります (Play モジュール!)

var slider = Swipe(document.getElementById('slider'), {
   …………
   …………
});

対応するインスタンス化コード (より単純な記述メソッドを持つ子供用の靴は独自のメソッドを使用できます):

<button onclick="Swipe.prev()">prev</button>
<button onclick="Swipe.next()">next</button>

このプラグインにはもう 1 つの重要なポイントがあります。指がスライド モジュール上を一度スライドすると停止します。この時点で、swipe.js のソース コードを変更する必要があります。

このようにして、このプラグインは基本的に実行できます。通常、最も基本的なニーズを満たします。

---

関連する推奨事項:

モバイル端末でのSwiperの使い方

vue コンポーネント開発のSwiper実装の詳細な説明

JSでのSwiperの使い方の紹介

以上がモバイル h5 カルーセル プラグインのスワイプ例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。