swiper制作全屏滚动首页

公司需要制作国外官网，各种花里胡哨的动效，并且要求全屏滚动

开始编写首页前，需要先将全屏滚动弄好，我对比swiper和fullPage两个插件，还是决定使用swiper，毕竟swiper熟悉点，不用太多学习成本。

当我下载完最新版本的swiper，即目前的5.3.1版本，发现垂直滚动有些问题，开启鼠标滚动切换只能切换2-3个模板，而且感觉切换不顺畅。效果如下：

swiper-5.3.1.gif

然后再网上查询，发现别人用的是4.x版本的swiper，于是又去官网下载了4.5.3版本的swiper，虽然鼠标滚动切换很顺畅，但是不能满足业务需求。因为其他版块有切换动画，底部栏相比其他版块高度低很多，所以我需要的是从最后一个版块（底部）向上滚动切换到倒数第三个版块，而不是倒数第二个。效果如下：

swiper-4.5.3.gif

于是最后，还是swiper版本的问题，我决定和别人的版本一致，使用4.0.6版本的swiper，满足业务需求。效果如下：

swiper-4.0.6.gif

下面为模板代码：

  
  
  
  
  
  
  


  

    

      

        
header
        
section 1
        
section 2
        
section 3
        
section 4
        
footer
      
      
      

    
  

.autoPage {
  width: 100%;
  height: 100%;
}
html,
body,
main {
  position: relative;
  height: 100%;
  background-color: #f5f5f5;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-container .swiper-wrapper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;
  font-weight: bold;
  color: #000;
  background: #fff;
}
.swiper-container .swiper-wrapper .header,
.swiper-container .swiper-wrapper .footer {
  height: 200px;
}