swipe使用及豎屏頁面滾動方法

 基於swipe4寫了一個移動端的全屏滾動效果  但是圖片始終不能自適應屏幕設備大小  這里記錄一下

開始的時候要設置  移動端配置

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<!--這里引入swipe的css文件-->

<link rel="stylesheet" type="text/css" href="css/swiper-4.3.3.min.css" />

然后html,body需要設置   寬高100%  如果swipe中外面還有嵌套的盒子或元素  也必須設置   寬高100%

豎屏效果需要設置

<!--這里引入jquery文件,如果需要的話 -->

<script src="js/jquery-1.12.4.min.js"></script>

<!--這里引入swipe的js文件-->

<script src="js/swiper-4.3.3.min.js"></script>

<script type="text/javascript">

var swiper = new Swiper('.swiper-container', {
　　direction: 'vertical',//設置豎屏   橫屏類似輪播圖是默認效果可以不設置
　　//slidesPerView: 'auto',//設置slider容器能夠同時顯示的slides數量,'auto'則自動根據slides的寬度來設定數量。
　　//centeredSlides: true,//設定為true時，活動塊會居中，而不是默認狀態下的居左。

　　//這里是為了顯示分頁器，前提是html中已經設置了分頁器
　　pagination: {
　　　　el: '.swiper-pagination',
　　　　type: 'fraction',
　　},
});
</script>

這里下面有個坑  百度很多屬性值都沒加引號，導致沒作用--最好官網查看一下

例如上面的   el:'.swiper-pagination'   el（屬性):'.swiper-pagination'(屬性值)