Comment utiliser le plug-in du carrousel mobile Swiper

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>

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>

La troisième étapeAppeler (voici le point)

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

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('.swiper-container', {
    pagination : '.swiper-pagination',
    loop : true,
    autoplay : 3000,
    autoplayDisableOnInteraction : false  /* 注意此参数，默认为true */ 
});

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.

Articles connexes :

Comment implémenter l'effet d'animation de neige dans jQuery

Comment implémenter l'actualisation de la liste déroulante dans l'applet WeChat Pull effet de chargement ?

Comment utiliser le plug-in de défilement numérique dans le mini-programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!