0712-2888027 189-8648-0214
微信公眾號

孝感風信網絡科技有限公司微信公眾號

當前位置: 主頁 > 技術支持 > Javascript/JQuery > Swiper開源、免費、強大的PC端/移動端觸摸滑動插件

Swiper開源、免費、強大的PC端/移動端觸摸滑動插件

時間:2016-12-25來源:風信網 點擊:
Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端。Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。Swiper開源、免費、穩定、使用簡單、功能強大,是架構移動終端網站的重要選擇!
 
Swiper基礎演示:http://www.swiper.com.cn/demo/index.html
Swiper開源、免費、強大的PC端/移動端觸摸滑動插件
 
Swiper在移動端的實際應用(演示):http://www.swiper.com.cn/demo/senior/index.html
Swiper開源、免費、強大的PC端/移動端觸摸滑動插件
 
Swiper在電腦端的實際應用(演示):http://www.swiper.com.cn/demo/web/index.html
Swiper開源、免費、強大的PC端/移動端觸摸滑動插件
 
Swiper開源、免費、強大的PC端/移動端觸摸滑動插件
 
Swiper中文API:http://www.swiper.com.cn/api/index.html
 
Swiper使用方法

  1.首先加載插件,需要用到的文件有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>

如果你的頁面加載了jQuery.js或者zepto.js,你可以選擇使用更輕便的swiper.jquery.min.js。

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/jquery.js"></script>
    <script src="path/to/swiper.jquery.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: '.swiper-pagination',
    
    // 如果需要前進后退按鈕
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // 如果需要滾動條
    scrollbar: '.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應該已經能正常切換了,如果沒有,你可以參考下這個測試包。現在開始添加各種選項和參數豐富你的Swiper,開啟華麗移動前端創作之旅。



*建議不使用Source Map功能,請把js壓縮文件最后一行//# sourceMappingURL=maps/swiper.min.js.map 刪掉。以免在某些瀏覽器出現以下提示:



如需要使用Source Map,演示包里面有該map文件,請放在相應的位置。

欄目列表
推薦內容
熱點內容
展開
博公司乐放6fu 快3夜8什么意思 上海11选5任3最长遗漏 熊猫棋牌破解版 福州星悦麻将苹果 双色球综合走势图 球探网一篮球即时比分 炒股交流平台 捉鸡麻将下载 天津快乐10分开奖视频 五骑士 l天星山西扣点麻将 吉林快三最长连出大 新疆35选7走势图 湖人vs热火2012 山西快乐10分钟开奖前三 3d预测过海预测