编程 Javascript

移动端触摸滑动插件swiper使用方法详解

Posted in Javascript onAugust 11, 2017

Swiper是移动端的一款非常强大的触摸滑动插件，下面代码只展示一些常用的配置，具体可以查看官网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">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class='swiper-lazy' data-src="img/banner/banner1.jpg" alt="">
        <div class='swiper-lazy-preloader'></div>
      </div>
      <div class="swiper-slide">
        <img class='swiper-lazy' data-src="img/banner/banner2.jpg" alt="">
        <div class='swiper-lazy-preloader'></div>
      </div>
      <div class="swiper-slide">
        <img class='swiper-lazy' data-src="img/banner/banner3.jpg" alt="">
        <div class='swiper-lazy-preloader'></div>
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
  </section>
  <script src='swiper.min.js'></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('.swiper-container',{
      loop:true,//无缝衔接滚动
      effect:'cube',//滑动效果
      autoplay:3000,
      autoplayDisableOnInteraction:false,//用户操作swiper之后不禁止autoplay
      pagination:'.swiper-pagination',
      paginationType:'progress',//分页器样式
      lazyLoading:true,//图片延迟加载
      lazyLoadingInPrevNext:true//前一个和后一个延迟加载

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

- Author -

diasa

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS类的封装及实现代码

Dec 02 Javascript

JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述

Apr 15 Javascript

JS图片无缝滚动(简单利于使用)

Jun 17 Javascript

js写一个字符串转成驼峰的实例

Jun 21 Javascript

jquery next nextAll nextUntil siblings的区别介绍

Oct 05 Javascript

jQuery实现的导航条切换可显示隐藏

Oct 22 Javascript

JS建造者模式基本用法实例分析

Jun 30 Javascript

jQuery图片左右滚动代码有左右按钮实例

Jun 20 Javascript

通过javascript进行UTF-8编码的实现方法

Jun 27 Javascript

jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】

Mar 09 Javascript

JS中Object对象的原型概念基础

Jan 29 Javascript

简述vue路由打开一个新的窗口的方法

Nov 29 Javascript

Echarts基本用法_动力节点Java学院整理

Aug 11 #Javascript

js 奇葩技巧之隐藏代码

Aug 11 #Javascript

echart简介_动力节点Java学院整理

Aug 11 #Javascript

Javascript中this关键字指向问题的测试与详解

Aug 11 #Javascript

使用JS编写的随机抽取号码的小程序

Aug 11 #Javascript

javascript简写常用的12个技巧（可以大大减少你的js代码量）

Mar 28 #Javascript

Mobile Web开发基础之四--处理手机设备的横竖屏问题

Aug 11 #Javascript