<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        Swiper 4.x 使用方法(移動端網站的內容觸摸滑動)

        來源:懂視網 責編:小采 時間:2020-11-27 22:14:25
        文檔

        Swiper 4.x 使用方法(移動端網站的內容觸摸滑動)

        Swiper 4.x 使用方法(移動端網站的內容觸摸滑動):Swiper常用于移動端網站的內容觸摸滑動 Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端。 Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。 Swiper開源、免費、穩定、使用簡單、功能強大,是架構移動終端網站的重要選
        推薦度:
        導讀Swiper 4.x 使用方法(移動端網站的內容觸摸滑動):Swiper常用于移動端網站的內容觸摸滑動 Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端。 Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。 Swiper開源、免費、穩定、使用簡單、功能強大,是架構移動終端網站的重要選

        Swiper常用于移動端網站的內容觸摸滑動

        Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端。

        Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。

        Swiper開源、免費、穩定、使用簡單、功能強大,是架構移動終端網站的重要選擇!

        1.首先加載插件,需要用到的文件有swiper.min.js和swiper.min.css文件。可下載Swiper文件或使用CDN。

        <!DOCTYPE html>
        <html>
        <head>
         ...
         <link rel="stylesheet" href="path/to/swiper.min.css" rel="external nofollow" >
        </head>
        <body>
         ...
         <script src="path/to/swiper.min.js"></script>
        </body>
        </html>

        2.HTML內容。

        <div class="swiper-container">
         <div class="swiper-wrapper">
         <div class="swiper-slide">Slide 1</div>
         <div class="swiper-slide">Slide 2</div>
         <div class="swiper-slide">Slide 3</div>
         </div>
         <!-- 如果需要分頁器 -->
         <div class="swiper-pagination"></div>
         
         <!-- 如果需要導航按鈕 -->
         <div class="swiper-button-prev"></div>
         <div class="swiper-button-next"></div>
         
         <!-- 如果需要滾動條 -->
         <div class="swiper-scrollbar"></div>
        </div>
        導航等組件可以放在container之外

        3.你可能想要給Swiper定義一個大小,當然不要也行。

        .swiper-container {
         width: 600px;
         height: 300px;
        } 

        4.初始化Swiper:最好是挨著</body>標簽

        <script> 
         var mySwiper = new Swiper ('.swiper-container', {
         direction: 'vertical',
         loop: true,
         
         // 如果需要分頁器
         pagination: {
         el: '.swiper-pagination',
         },
         
         // 如果需要前進后退按鈕
         navigation: {
         nextEl: '.swiper-button-next',
         prevEl: '.swiper-button-prev',
         },
         
         // 如果需要滾動條
         scrollbar: {
         el: '.swiper-scrollbar',
         },
         }) 
         </script>
        </body>

        如果不能寫在HTML內容的后面,則需要在頁面加載完成后再初始化(不推薦)。

        <script type="text/javascript">
        window.onload = function() {
         ...
        }
        </script>

        或者這樣(Jquery和Zepto)

        <script type="text/javascript">
        $(document).ready(function () {
         ...
        })
        </script>

        5.完成。恭喜你,現在你的Swiper應該已經能正常切換了。

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        Swiper 4.x 使用方法(移動端網站的內容觸摸滑動)

        Swiper 4.x 使用方法(移動端網站的內容觸摸滑動):Swiper常用于移動端網站的內容觸摸滑動 Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端。 Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。 Swiper開源、免費、穩定、使用簡單、功能強大,是架構移動終端網站的重要選
        推薦度:
        標簽: 網站 sw swiper
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲AV成人影视在线观看 | 国产成人无码精品久久久久免费| 美丽姑娘免费观看在线观看中文版| 亚洲视频在线精品| 美女黄色免费网站| 妞干网在线免费观看| 亚洲人妖女同在线播放| 最近免费中文字幕mv在线电影| 国产AV无码专区亚洲AV毛网站| 岛国岛国免费V片在线观看| 久久久久亚洲精品无码网址 | 亚洲午夜电影在线观看| 久久国产免费观看精品3| 亚洲AV成人精品网站在线播放| 成人性做爰aaa片免费看| 亚洲女初尝黑人巨高清| 三年片免费观看大全国语| 国产亚洲情侣一区二区无码AV| www成人免费视频| 亚洲午夜久久久影院| 全黄大全大色全免费大片| 亚洲国产另类久久久精品小说| 中文字幕成人免费高清在线视频| 亚洲线精品一区二区三区| 精品一区二区三区免费| 亚洲免费视频在线观看| 四虎1515hh永久久免费| 亚洲六月丁香婷婷综合| 精品国产免费观看| 色屁屁在线观看视频免费| 中文字幕亚洲激情| 久久免费观看国产精品88av| 亚洲精品成人图区| 在线精品免费视频无码的| 国产精品亚洲av色欲三区| 亚洲午夜福利精品无码| 可以免费观看的毛片| 亚洲Av无码一区二区二三区| 免费人成在线观看播放国产| 国产午夜精品理论片免费观看| 亚洲综合无码一区二区|