溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Swiper常用于移動端網站的內容觸摸滑動
Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。
Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。
Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！
基于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" rel="external nofollow" />
然后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'(屬性值)
總結
以上所述是小編給大家介紹的swipe使用及豎屏頁面滾動方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
