用swiper4实现的拥有header和footer的全屏滚动demo，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Fullpage-Swiper</title>

    <link href="https://cdn.bootcss.com/Swiper/4.0.6/css/swiper.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

    <script src="https://cdn.bootcss.com/Swiper/4.0.6/js/swiper.js"></script>

    <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%;

            margin-left: auto;

            margin-right: auto;

        }

        .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;

        }

        .header, .footer {

            height: 100px;

        }

    </style>

</head>

<body>

<!-- Swiper -->

<div class="swiper-container">

    <div class="swiper-wrapper">

        <div class="swiper-slide header">header</div>

        <div class="swiper-slide">section 1</div>

        <div class="swiper-slide">section 2</div>

        <div class="swiper-slide">section 3</div>

        <div class="swiper-slide">section 4</div>

        <div class="swiper-slide footer">footer</div>

    </div>

    <!-- Add Pagination -->

    <div class="swiper-pagination"></div>

</div>

<!-- Initialize Swiper -->

<script>

    var swiper = new Swiper('.swiper-container', {

        direction: 'vertical',

        slidesPerView: 'auto',

        spaceBetween: 10,

        mousewheel: true,

        pagination: {

            el: '.swiper-pagination',

            clickable: true,

        },

    });

</script>

</body>

</html>

swiper4实现的拥有header和footer的全屏滚动demo/swiper fullpage footer的更多相关文章

  1. fullpagejs实现的拥有header和foooter的全屏滚动demo/fullpage footer

    fullpagejs实现的拥有header和foooter的全屏滚动, 技术要点:给section元素加fp-auto-height类, <!DOCTYPE html> <html ...

  2. 关于footer 小于一屏还要在底部显示的思考

    首先想到了页面是动态的  就是js 计算 但是有一个简单的方法就是 运用定位 1 footer 的祖先元素没有定位属性 absoulite (这样他就会相对于文档定位) left:0 bottom : ...

  3. h5中的结构元素header、nav、article、aside、section、footer介绍

    结构元素不具有任何样式,只是使页面元素的的语义更加明确. header元素 header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容.header元素通常用来放置 ...

  4. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  5. Web前端理论知识记录

      Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...

  6. JavaScript资源大全中文版（Awesome最新版--转载自张果老师博客）

    JavaScript资源大全中文版(Awesome最新版)   目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框 ...

  7. JavaScript资源大全

    目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框架 模板引擎 数据可视化 编辑器 UI 输入 日历 选择 文件上 ...

  8. 全屏滚动-jQuery插件实现

    全屏滚动 <---很久没写了,这段忙了点,以后还是每周尽量写点东西---> 在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1. ...

  9. Awesome Javascript(中文翻译版)

    [导读]:GitHub 上有一个 Awesome – XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架 ...

随机推荐

  1. STM32通过调用库函数进行编程

    1.调用库函数编程和直接配置寄存器编程的差别: 2.CMSIS标准: 3.STM32库函数的组织: 4.程序例举: 调用库函数实现通过USART发送数据(26个大写的英文字母) 首先:在主函数部分先要 ...

  2. PHP 画图——使用jpgraph画图

     1.要支持中文须要用到simhei.ttf和simsun.ttc这两个字体,在使用中文的时候须要使用SetFont(FF_SIMSUN,FS_BOLD)设置字体. 将须要的字体放入到项目文件夹下 ...

  3. vector draw 试用期结束的 激活方法

     [HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Licenses\DBEA4D42-0745-428e-B17A-A5B6CA3AB34B] 把这个注冊表给删 了

  4. ASP.NET MVC中为DropDownListFor设置选中项的方法

    在MVC中,当涉及到强类型编辑页,如果有select元素,需要根据当前Model的某个属性值,让Select的某项选中.本篇只整理思路,不涉及完整代码. □ 思路 往前台视图传的类型是List< ...

  5. 动态输出html一些效果失效的处理

    利用AJAX动态加载页面,实现无刷新加载,有时会出现一些问题.比如说,在一些jquery控件中,是利用在页面加载的时候,对一些带有特殊属性的元素进行处理,比如事件绑定什么的.假如是动态加载,此时页面早 ...

  6. Delphi汉字简繁体转换代码（分为D7和D2010版本）

    //delphi 7 Delphi汉字简繁体转换代码unit ChineseCharactersConvert; interface uses   Classes, Windows; type   T ...

  7. Buildroot构建指南--快速上手与实用技巧【转】

    本文转载自:http://blog.csdn.net/zhou_chenz/article/details/52335634 Buildroot官方全英文使用手册的链接是https://buildro ...

  8. HDU3488 Tour —— 二分图最大权匹配 KM算法

    题目链接:https://vjudge.net/problem/HDU-3488 Tour Time Limit: 3000/1000 MS (Java/Others)    Memory Limit ...

  9. YTU 2952: A代码填充--谁挡住了我

    2952: A代码填充--谁挡住了我 时间限制: 1 Sec  内存限制: 128 MB 提交: 135  解决: 38 题目描述 n个人前后站成一列,对于队列中的任意一个人,如果排在他前面的人的身高 ...

  10. 揭开自然拼读法(Phonics)的神秘面纱

    揭开自然拼读法(Phonics)的神秘面纱 自然拼读法  (Phonics),是指看到一个单词,就可以根据英文字母在单词里的发音规律把这个单词读出来的一种方法.即从“字母发音-字母组合发音-单词-简单 ...