公司需要制作國(guó)外官網(wǎng)恍风，各種花里胡哨的動(dòng)效蹦狂，并且要求全屏滾動(dòng)
開始編寫首頁前，需要先將全屏滾動(dòng)弄好朋贬，我對(duì)比swiper和fullPage兩個(gè)插件鸥咖，還是決定使用swiper，畢竟swiper熟悉點(diǎn)兄世，不用太多學(xué)習(xí)成本。
當(dāng)我下載完最新版本的swiper啊研，即目前的5.3.1版本御滩，發(fā)現(xiàn)垂直滾動(dòng)有些問題鸥拧，開啟鼠標(biāo)滾動(dòng)切換只能切換2-3個(gè)模板，而且感覺切換不順暢削解。效果如下：
swiper-5.3.1.gif
然后再網(wǎng)上查詢富弦，發(fā)現(xiàn)別人用的是4.x版本的swiper，于是又去官網(wǎng)下載了4.5.3版本的swiper氛驮，雖然鼠標(biāo)滾動(dòng)切換很順暢腕柜，但是不能滿足業(yè)務(wù)需求。因?yàn)槠渌鎵K有切換動(dòng)畫矫废，底部欄相比其他版塊高度低很多盏缤，所以我需要的是從最后一個(gè)版塊（底部）向上滾動(dòng)切換到倒數(shù)第三個(gè)版塊，而不是倒數(shù)第二個(gè)蓖扑。效果如下：
swiper-4.5.3.gif
于是最后唉铜，還是swiper版本的問題，我決定和別人的版本一致律杠，使用4.0.6版本的swiper潭流，滿足業(yè)務(wù)需求。效果如下：
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的滑動(dòng)方向-垂直
mousewheel: true, // 開啟鼠標(biāo)滾輪控制Swiper切換柜去。
speed: 500, // 切換速度
slidesPerView: 'auto', // 設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量(carousel模式)灰嫉。'auto'則自動(dòng)根據(jù)slides的寬度來設(shè)定數(shù)量。
touchRatio: 0, // 觸摸比例嗓奢。 設(shè)置為0時(shí)讼撒，完全無法滑動(dòng)
spaceBetween: 10, // slide之間距離(demo用于區(qū)分slide, 實(shí)際開發(fā)可刪除)
// 分頁器
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;
}
