Home > Article > Web Front-end > Detailed explanation of how to use swiper

Detailed explanation of how to use swiper

巴扎黑Original: 2017-08-12 16:10:303540browse

This article mainly introduces in detail how to use the mobile touch sliding plug-in swiper, which has certain reference value. Interested friends can refer to

Swiper It is a very powerful touch sliding plug-in for mobile. The following code only shows some commonly used configurations. For details, you can check the official website 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>

The above is the detailed content of Detailed explanation of how to use swiper. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to the usage of Swiper in JSNext article：Introduction to the usage of Swiper in JS

See more

Detailed explanation of how to use swiper

Related articles