公司需要制作國外官網，各種花里胡哨的動效，并且要求全屏滾動
開始編寫首頁前，需要先將全屏滾動弄好，我對比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;
}
