Swiper モバイル カルーセル プラグインの使用方法

この記事では主にスワイパーモバイルカルーセルプラグインを詳しく紹介します。画像をタッチするとカルーセルが停止します。興味のある友達は参考にしてください。

この記事の例はスワイパーモバイルをみんなと共有します。ターミナルカルーセルプラグインは参考用です

以下は私が遭遇した問題であり、このプラグインが必要ない場合によく使用されるいくつかのパラメーターでもあります。複雑な問題は、この記事を読むことで解決できます。さらに詳しく知りたい場合は、ここに Swiper プラグインの公式アドレスがあります。

ステップ1swiper.min.jsの導入

<script src="../style/js/swiper.min.js"></script>

ステップ2html

<p class="swiper-container">
  <p class="swiper-wrapper">
    <p class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner1.jpg">
    </p>
    <p class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner2.jpg">
    </p>
    <p class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner3.jpg">
    </p>
  </p>
  <p class="swiper-pagination"></p> <!--需要轮播序号的时候写-->
</p>

ステップ3呼び出し（ここがポイント）

var mySwiper = new Swiper('.swiper-container', {
    pagination : '.swiper-pagination',
    loop : true,
    autoplay : 3000
});

さて、この場合、写真は自動的に回転できますが、手で触れるとカルーセルが停止するため、別のパラメーターを追加する必要があります

var mySwiper = new Swiper('.swiper-container', {
    pagination : '.swiper-pagination',
    loop : true,
    autoplay : 3000,
    autoplayDisableOnInteraction : false  /* 注意此参数，默认为true */ 
});

どのようにスライドしても、カルーセル イベントが再トリガーされます。

上記は私があなたのためにまとめたものです。

関連記事:

jQueryで雪のアニメーション効果を実現する方法

WeChatアプレットでリストのプルダウン・リフレッシュ・プルアップの読み込み効果を実現するにはどうすればよいですか?

WeChatミニプログラムでデジタルスクロールプラグインを使用する方法

以上がSwiper モバイル カルーセル プラグインの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。