詳解swipe使用及豎屏頁面滾動(dòng)方法
Swiper常用于移動(dòng)端網(wǎng)站的內(nèi)容觸摸滑動(dòng)
Swiper是純javascript打造的滑動(dòng)特效插件，面向手機(jī)、平板電腦等移動(dòng)終端。
Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏多圖切換等常用效果。
Swiper開源、免費(fèi)、穩(wěn)定、使用簡單、功能強(qiáng)大，是架構(gòu)移動(dòng)終端網(wǎng)站的重要選擇！
基于swipe4寫了一個(gè)移動(dòng)端的全屏滾動(dòng)效果 但是圖片始終不能自適應(yīng)屏幕設(shè)備大小這里記錄一下。
開始的時(shí)候要設(shè)置 移動(dòng)端配置
<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需要設(shè)置 寬高100% 如果swipe中外面還有嵌套的盒子或元素 也必須設(shè)置 寬高100%
豎屏效果需要設(shè)置
<!--這里引入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',//設(shè)置豎屏 橫屏類似輪播圖是默認(rèn)效果可以不設(shè)置
//slidesPerView: 'auto',//設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量,'auto'則自動(dòng)根據(jù)slides的寬度來設(shè)定數(shù)量。
//centeredSlides: true,//設(shè)定為true時(shí)，活動(dòng)塊會居中，而不是默認(rèn)狀態(tài)下的居左。
//這里是為了顯示分頁器，前提是html中已經(jīng)設(shè)置了分頁器
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
});
</script>
這里下面有個(gè)坑 百度很多屬性值都沒加引號，導(dǎo)致沒作用--最好官網(wǎng)查看一下
例如上面的 el:'.swiper-pagination' el（屬性):'.swiper-pagination'(屬性值)
總結(jié)
以上所述是小編給大家介紹的swipe使用及豎屏頁面滾動(dòng)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
使用js判斷當(dāng)前時(shí)區(qū)TimeZone是否是夏令時(shí)
這篇文章主要介紹了js判斷當(dāng)前時(shí)區(qū)TimeZone是否是夏令時(shí)的方法,需要的朋友可以參考下2014-02-02
這幾天在做一個(gè)文件管理的模塊，里面有排序的功能，產(chǎn)品經(jīng)理看了說希望能做出更加智能的文件排序功能，就像是win7的名稱排序一樣，主要就是文件名中的數(shù)字會按大小排序，而不是直接按ascii碼 ,這兩天晚上沒事，就先寫了這個(gè)排序方法，下個(gè)版本中就可以用上了2010-08-08
D3.js實(shí)現(xiàn)餅圖,環(huán)圖,玫瑰圖的繪制
這篇文章主要為大家介紹了如何利用D3.js中的d3.pie和d3.arc實(shí)現(xiàn)餅圖、環(huán)圖和玫瑰圖的繪制，文中的實(shí)現(xiàn)方法講解詳細(xì)，感興趣的可以嘗試一下2022-11-11
詳解JavaScript的閉包、IIFE、apply、函數(shù)與對象
本文主要對JavaScript的閉包、IIFE、apply、函數(shù)與對象進(jìn)行詳細(xì)介紹。有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
在element-ui的select下拉框加上滾動(dòng)加載
這篇文章主要介紹了在element-ui的select下拉框加上滾動(dòng)加載，本文以以element-ui中的select為例，給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-04-04
可能在大家使用JavaScript效果時(shí)，會碰到在各個(gè)瀏覽器中頁面的顯示效果不同，甚至報(bào)錯(cuò)，這就是代碼的兼容性問題。本文就是主要介紹JavaScript的兼容性與調(diào)試技巧，希望對大家有所幫助2016-11-11
要返回上一頁再刷新頁面我們用到最多的是在像php,asp,jsp,asp.net中，下面我來給大家先介紹js 返回前一頁并刷新頁面，然后再把這些代碼放在php中實(shí)現(xiàn)刪除后返回當(dāng)前頁面并刷新頁面2020-09-09
js實(shí)現(xiàn)遍歷含有input的table實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)遍歷含有input的table方法,結(jié)合實(shí)例形式分析了jsp讀取數(shù)據(jù)庫動(dòng)態(tài)生成table及JavaScript遍歷table的相關(guān)技巧,需要的朋友可以參考下2015-12-12
本文主要介紹了Javascript變量函數(shù)聲明提升深刻理解，Javascript變量函數(shù)聲明提升Hoisting是在Javascript中執(zhí)行上下文工作方式的一種認(rèn)識，更多相關(guān)知識需要的小伙伴可以參考下面文章詳細(xì)內(nèi)容2022-06-06
批量下載對路網(wǎng)圖片并生成html的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄肯螺d對路網(wǎng)圖片并生成html的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考2016-06-06