简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Explication détaillée de la façon d'utiliser swiper

Explication détaillée de la façon d'utiliser swiper

巴扎黑
巴扎黑original
2017-08-12 16:10:303526parcourir

Cet article présente principalement en détail comment utiliser le plug-in coulissant tactile mobile. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Swiper C'est un outil très puissant. plug-in coulissant tactile pour mobile Le code suivant ne montre que certaines configurations couramment utilisées. Pour plus de détails, vous pouvez consulter l'API du site officiel


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="swiper.min.css" rel="external nofollow" >
  <style>
    /*假设设计稿是640 轮播图区域640*300*/
    html{
      font-size:100px;
    }
    html,body{
      width:100%;
      overflow-x:hidden;
    }
    .swiper-container{
      margin:0 auto;
      height:3rem;
      overflow:hidden;
    }
    .swiper-slide{
      height:3rem;
    }
    .swiper-slide img{
      width:100%;
      height:100%;
    }
  </style>
</head>
<body>
  <section class="swiper-container">
    <p class="swiper-wrapper">
      <p class="swiper-slide">
        <img class=&#39;swiper-lazy&#39; src="img/banner/banner1.jpg" alt="">
        <p class=&#39;swiper-lazy-preloader&#39;></p>
      </p>
      <p class="swiper-slide">
        <img class=&#39;swiper-lazy&#39; src="img/banner/banner2.jpg" alt="">
        <p class=&#39;swiper-lazy-preloader&#39;></p>
      </p>
      <p class="swiper-slide">
        <img class=&#39;swiper-lazy&#39; src="img/banner/banner3.jpg" alt="">
        <p class=&#39;swiper-lazy-preloader&#39;></p>
      </p>
    </p>
    <!-- 如果需要分页器 -->
    <p class="swiper-pagination"></p>
    
    <!-- 如果需要导航按钮 -->
    <p class="swiper-button-prev"></p>
    <p class="swiper-button-next"></p>
    
    <!-- 如果需要滚动条 -->
    <p class="swiper-scrollbar"></p>
  </section>
  <script src=&#39;swiper.min.js&#39;></script>
  <script>
    //REM 响应式
    ~function(){
      var desN = 640,winW = document.documentElement.clientWidth,ratio = winW / desN;
      document.documentElement.style.fontSize = ratio*100 + "px";
    }();

    //初始化swiper实现区域的滑动
    //new Swiper([container selector],[settings])
    var swiper1 = new Swiper(&#39;.swiper-container&#39;,{
      loop:true,//无缝衔接滚动
      effect:&#39;cube&#39;,//滑动效果
      autoplay:3000,
      autoplayDisableOnInteraction:false,//用户操作swiper之后不禁止autoplay
      pagination:&#39;.swiper-pagination&#39;,
      paginationType:&#39;progress&#39;,//分页器样式
      lazyLoading:true,//图片延迟加载
      lazyLoadingInPrevNext:true//前一个和后一个延迟加载

    })
  </script>
</body>
</html>
.

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Introduction à l'utilisation de Swiper en JSArticle suivant：Introduction à l'utilisation de Swiper en JS

Articles Liés

Voir plus