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

下面为模板代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../static/css/reset.css">
  <link rel="stylesheet" href="../static/css/index.css">
  <link rel="stylesheet" href="../static/css/swiper-4.5.3.css">
</head>
<body>
  <main role="main">
    <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>
  </main>
</body>
<script src="../lib/jquery-3.4.1.min.js"></script>
<!-- <script src="../lib/swiper-5.3.1.js"></script> -->
<!-- <script src="../lib/swiper-4.5.3.js"></script> -->
<script src="https://cdn.bootcss.com/Swiper/4.0.6/js/swiper.js"></script>
<script>
$(function() {
  const mySwiper = new Swiper('.swiper-container', {
    direction: 'vertical', // Slides的滑动方向-垂直
    mousewheel: true, // 开启鼠标滚轮控制Swiper切换。
    speed: 500, // 切换速度
    slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量(carousel模式)。'auto'则自动根据slides的宽度来设定数量。
    touchRatio: 0, // 触摸比例。 设置为0时，完全无法滑动
    spaceBetween: 10, // slide之间距离(demo用于区分slide, 实际开发可删除)
    
    // 分页器
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  })
})
</script>
</html>

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

最后编辑于：2020.02.26 10:09:09