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

亚连
リリース: 2018-06-14 16:53:40
オリジナル
2619 人が閲覧しました

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

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

以下は私が遭遇した問題であり、このプラグインが必要ない場合によく使用されるいくつかのパラメーターでもあります。複雑な問題は、この記事を読むことで解決できます。さらに詳しく知りたい場合は、ここに 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート