<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="swiper.min.css">

  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    };
  </style>
</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next" id="nextPage"></div>
   <!-- <div class="swiper-button-prev"></div>-->
  </div>

  <!-- Swiper JS -->
  <script src="swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
       direction : 'vertical',
       loop : true,
    });
  </script>
</body>
</html>
js文件可去官网下载，css文件可自行改造

使用swiper简单的h5下滑翻页效果,的更多相关文章

  1. vue案例 - vue-awesome-swiper实现h5滑动翻页效果

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...

  2. 转载 vue-awesome-swiper - 基于vue实现h5滑动翻页效果

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...

  3. 简单做出HTML5翻页效果文字特效

    之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transfor ...

  4. webapp应用--模拟电子书翻页效果

    前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...

  5. 纯css3写的仿真图书翻页效果

    对css3研究越深入,越觉得惊艳.css3说不上是万能的,但是它能实现的效果也超出了我的想象.它的高效率和动画效果的流畅性很多情况下能替代js的作用.个人习惯css3能实现的效果就不会用js,虽然在国 ...

  6. Android 实现书籍翻页效果----升级篇

    自从之前发布了<Android 实现书籍翻页效果----完结篇 >之后,收到了很多朋友给我留言,前段时间由于事情较多,博客写得太匆忙很多细节地方没有描述清楚.所以不少人对其中的地方有不少不 ...

  7. transform3D实现翻页效果

    ---恢复内容开始--- 闲篇 最近升级了下百度音乐,唯一的感觉就是动画效果很炫丽.我不是个对产品很敏感的人,但是这段时间观察一些大厂的产品发现现在的APP越来越重视动画效果了.大家可能没有注意过,连 ...

  8. CSS3-----图片翻页效果的展示

    在开发一个网站的过程中各种翻页效果数不胜数,在这里我将介绍一下简单的一种方法就是使用css3的旋转即可实现这种常见的效果: 显示效果如下: 首先是页面的布局,不用那么复杂; a标签的href属性,一般 ...

  9. 利用GPU实现翻页效果

    0x00 前言 有一段时间没有更新博客了,在考虑写点什么的时候正好赶上了这个月我的书<Unity 3D脚本编程>又加印了.因此写篇小文聊聊利用shader来实现翻书的效果吧. 虽然本文是这 ...

随机推荐

  1. YYHS-NOIP模拟赛-gcd

    题解 这道题题解里说用莫比乌斯反演做(我这个蒟蒻怎么会做呢) 但是不会,所以我们另想方法,这里我们用容斥来做 我们先把500000以内的所有质数筛出来 每次读入编号的时候,先把编号对应的这个数分解质因 ...

  2. UVa1595，Symmetry

    这题居然是1A过的.....最近无比失落的心情顿时愉悦起来~ 将数据全部读入 先用二维数据来存储坐标(先把题做出来再说= =) 题目中的x,y的坐标范围是-1W到1W....在数组下标里是不能用负数保 ...

  3. Linux 快捷键汇总（偏基础）

    自己最近才搭上Linux末班车,有一种想见恨晚的感觉,完全给你一种快速清爽的感觉! 因为需要,所以学习,记录自己在使用Linux系统上的点滴,偏基础! 1. 打开终端: Ctrl+Alt+T 2. 复 ...

  4. css实现的交互运动

    <style type="text/css"> .filter-mix { position: absolute; top: 50%; left: 50%; trans ...

  5. Android 分包 MultiDex 策略总结

    1.分包背景 我们在Android开发中,会不断的在App代码里面增加新功能,引入新的类库,如果不加控制的话,那么会碰到编辑器IDE爆出一下错误: Error:Execution failed for ...

  6. github 项目绑定自己的域名

    上周脑子发热申请了自己的一个域名.本想搞一个自己的网站,后来囊中羞涩,数据库,服务器..买不起了,只买个域名,发现啥也搞不成.后来突然想到了不行找个东西映射到这个域名上吧,就想到了github,之前也 ...

  7. Memcached查找命令

    Memcached各个查找命令的语法格式都类似,且有相同的参数和参数含义,先将可能出现的各个参数的意义说明如下 key:键值 key-value 结构中的 key,用于查找缓存值. noreply(可 ...

  8. xml入门视频

    XML 是可扩展标记语言(Extensible Markup Language)的缩写,其中的 标记(markup)是关键部分.您可以创建内容,然后使用限定标记标记它,从而使每个单词.短语或块成为可识 ...

  9. velocity的基础使用

    velocity的基本使用要求:掌握jsp的jstl技术,因为velocity的用法和jstl非常相似.语法上差别不大,但是velocity的示例明显比jstl少,解释也少,所以使用velocity必 ...

  10. js实现获取短信验证码倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...