Comment utiliser le plug-in du carrousel mobile Swiper-js tutoriel-php.cn

Comment utiliser le plug-in du carrousel mobile Swiper

亚连

Libérer： 2018-06-14 16:53:40

original

2604 Les gens l'ont consulté

Cet article présente principalement en détail le plug-in du carrousel mobile swiper. Après avoir touché l'image, le carrousel s'arrête, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à l'exemple de cet article

I. J'ai partagé le plug-in du carrousel mobile swiper pour votre référence. Le contenu spécifique est le suivant

Voici les problèmes que j'ai rencontrés et plusieurs paramètres couramment utilisés avec ce plug-in. Beaucoup de choses sont compliquées, vous pouvez le résoudre en lisant cet article. Si vous souhaitez en savoir plus, voici l'adresse officielle du plug-in swiper.

La première étapePrésentation de swiper.min.js

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

Copier après la connexion

La deuxième étapehtml

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

Copier après la connexion

La troisième étapeAppeler (voici le point)

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

Copier après la connexion

Dans ce cas, les images peuvent pivoter automatiquement, mais lorsqu'elles sont touchées avec la main, la rotation s'arrêtera, donc pour ajouter un autre paramètre

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

Copier après la connexion

peu importe la façon dont vous glissez, l'événement carrousel sera redéclenché.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.