swiper插件簡單使用

時間 2021-01-02

標籤 css html app ide oop 插件 code htm get 欄目 CSS 简体版

原文原文鏈接

1 swiper介紹

開源、免費、強大的觸摸滑動插件css

簡單配置便可實現手機、電腦網頁大部分滑動功能，焦點圖、tab、觸摸導航等html

好比常見輪播圖就能夠用這個實現app

官網:https://www.swiper.com.cn/ide

swiper3地址：https://3.swiper.com.cn/oop

這裏總結swiper3版本的簡單使用方法插件

2 使用

2.1 下載swiper

https://3.swiper.com.cn/download/index.htmlcode

2.2 使用

首先加載插件，須要用到的文件有swiper.min.js和swiper.min.css文件。

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

HTML內容。把 Slide 1到3 換成img標籤便可實現輪播圖

<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以外

初始化Swiper：最好是挨着標籤(其實就是頁面加載完成後加載)

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    //direction: 'vertical',默認是垂直方向
    loop: true,//循環滾動
    
    // 若是須要分頁器
    pagination: '.swiper-pagination',
    
    // 若是須要前進後退按鈕
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // 若是須要滾動條
    //scrollbar: '.swiper-scrollbar',
  })        
</script>

注意：若是不想使用某個功能,須要將對應的html和js的內容都刪掉(註釋掉),不然可能會報錯.htm

好比：不想要滑動條這個功能須要將下面兩段代碼刪掉,注意要同時刪掉。ip

htmlget