So verwenden Sie das mobile Karussell-Plug-in von Swiper

In diesem Artikel wird hauptsächlich das Swiper-Mobilkarussell-Plugin im Detail vorgestellt. Nach dem Berühren des Bildes stoppt das Karussell, was einen gewissen Referenzwert hat.

I Ich habe das Swiper-Mobilkarussell-Plugin als Referenz freigegeben. Der spezifische Inhalt lautet wie folgt:

Im Folgenden sind die Probleme aufgeführt, auf die ich gestoßen bin, und mehrere Parameter, die häufig mit diesem Plug-In verwendet werden Vieles ist kompliziert, Sie können es lösen, indem Sie diesen Artikel lesen. Wenn Sie mehr wissen möchten, finden Sie hier die offizielle Adresse des Swiper-Plug-Ins.

Der erste SchrittEinführung von swiper.min.js

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

Der zweite Schritthtml

<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>

Der dritte Schritt Schritt Aufruf (hier ist der Punkt)

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

In diesem Fall können sich die Bilder automatisch drehen, aber wenn sie mit der Hand berührt werden, stoppt die Drehung, sodass Sie einen weiteren Parameter hinzufügen müssen

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

Egal wie Sie gleiten, das Karussell-Ereignis wird erneut ausgelöst.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So erzielen Sie einen Schneeanimationseffekt in jQuery

So implementieren Sie die Listen-Pulldown-Aktualisierung im WeChat-Applet Pull Ladeeffekt?

So verwenden Sie das digitale Scroll-Plug-in im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das mobile Karussell-Plug-in von Swiper. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!