Swiper モバイルカルーセルプラグインの使用方法-jsチュートリアル-php.cn

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

亚连

リリース： 2018-06-14 16:53:40

オリジナル

2675 人が閲覧しました

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

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

以下は私が遭遇した問題であり、このプラグインが必要ない場合によく使用されるいくつかのパラメーターでもあります。複雑な問題は、この記事を読むことで解決できます。さらに詳しく知りたい場合は、ここに 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(&#39;.swiper-container&#39;, {
    pagination : &#39;.swiper-pagination&#39;,
    loop : true,
    autoplay : 3000
});

ログイン後にコピー

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

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

ログイン後にコピー

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

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

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

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

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

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