スワイパーの使い方を詳しく解説-jsチュートリアル-php.cn

スワイパーの使い方を詳しく解説

巴扎黑

リリース： 2017-08-12 16:10:30

オリジナル

3544 人が閲覧しました

この記事では主にモバイル側でのタッチスライディングプラグインスワイパーの使い方を詳しく紹介しますので、興味のある方は参考にしてください

スワイパーは、モバイル側での非常に強力なタッチスライディングプラグインです。モバイル側のプラグイン。以下のコードは一般的に使用される構成のみを示しています。詳細については、公式 Web サイトの API を確認してください

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

ログイン後にコピー

以上がスワイパーの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。