概述
swiper.js確實是一個很好用的插件，下面記錄下我在全屏使用過程中遇到的一些坑和解決辦法，供以后開發時參考，相信對其他人也有用。
通用方案
一般來說，swiper需要放在body的下一層，雖然也可以用一個div包裹它，無論怎樣，它的上級和上上級父節點都需要加上如下代碼：
//有div.wrap包裹
body, html, .wrap, .swiper-container {
width: 100%;
height: 100%;
}
//無div包裹
body, html, .swiper-container {
width: 100%;
height: 100%;
}
屏幕自適應
有2種方案，各有優劣：
- 屏幕自適應，滑動一下滑塊即到了下一張slider，優點是體驗很好，缺點是slider中超過屏幕的內容會自動被隱藏且不能被看到。
- 屏幕不自適應，滑動一下會滑動到當前slider的底部，再滑一下才能滑到下一頁。優點是能看到整頁內容，缺點是體驗不好。
以上兩種方案其實就是height是具體數值還是百分比的問題，實現代碼如下：
//屏幕自適應
.swiper-slide {
height: 100%; //這里是終點
width: 100%;
position: relative;
overflow: hidden;
}
//屏幕不自適應
.swiper-slide {
height: 950px; //具體數值，隨意填
width: 100%;
position: relative;
overflow: hidden;
}
所以如果每一個slider的內容很多，就只能用屏幕不自適應的方法，否則建議選用屏幕自適應的方法。
需要注意的是：
- 由於height：100%的機制是對比父標簽的，所以屏幕自適應方案中可能需要將所有父容器的height都設置為100%，甚至有必要使用！important。
- 屏幕自適應方案安排頁腳的方法是：把頁腳單獨放在一個slider里面。
消除滾動條
一般情況下使用swiper瀏覽器右側是沒有滾動條的，但是一些特殊情況或者兼容其它瀏覽器時就會突然有滾動條，這個時候可以用如下css代碼解決：
overflow-y:hidden;
這行代碼有些時候有兼容問題，但是可以通過設置position：relative解決，具體方法自行百度。
兼容問題
如果要兼容IE7的話，請使用swiper2。否則的話，在IE7上面swiper不能切換slider。