竖向的全屏切换效果怎么实现？

Question

<style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        #banner {
            height: 100%;
            overflow: hidden;
        }
        .section{
            height: 100%;
        }
        .section1{
            background: aquamarine;
        }
        .section2{
            background: #990000;
        }
        .section3{
            background: chartreuse;
        }
        .section4{
            background: cadetblue;
        }
        .section5{
            background: darkolivegreen;
        }
        .btn{
            position: absolute;
            top: 500px;
            left: 100px;
        }
    </style>

<div id="banner">
        <div class="section section1"></div>
        <div class="section section2"></div>
        <div class="section section3"></div>
        <div class="section section4"></div>
        <div class="section section5"></div>
        <input class="btn" type="button" value="下一页"/>
    </div>

想实现竖向的全屏切换，点击下一页的时候切换到下一个section，该怎么实现？求个思路

Answer 1

swiper 中文网

Swiper常用于移动端网站的内容触摸滑动

Answer 2

#banner{
    height:100%;
    overflow:hidden;
}
.section{
    height:100%;
 }

移动banner的垂直位置实现section的切换

全屏滚动

Answer 3

swiper和onepage-scroll都可以