suchen

Heim >Web-Frontend >js-Tutorial >Einführung in die Verwendung von Swiper in JS

Einführung in die Verwendung von Swiper in JS

巴扎黑
巴扎黑Original
2017-08-12 16:04:322733Durchsuche

Swiper ist ein sehr leistungsstarkes Touch-Slide-Plug-in für Mobilgeräte. In diesem Artikel werde ich die Verwendung von Swiper in JS und den Karusselleffekt mit Ihnen teilen. Freunde, die interessiert sind, sollten einen Blick darauf werfen

Swiper ist ein sehr leistungsstarkes Touch-Slide-Plug-in auf der mobilen Seite. Der folgende Code zeigt nur einige häufig verwendete Konfigurationen. Bitte überprüfen Sie die offizielle 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>

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Swiper in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So passen Sie ionic2 an Mobiltelefone, Tablets und andere Geräte anNächster Artikel：So passen Sie ionic2 an Mobiltelefone, Tablets und andere Geräte an

In Verbindung stehende Artikel

Mehr sehen