Explication détaillée de la façon d'utiliser swiper-js tutoriel-php.cn

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

巴扎黑

Libérer： 2017-08-12 16:10:30

original

3545 Les gens l'ont consulté

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>

Copier après la connexion

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!