iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 50
0
Modern Web

30天學習30套前端技術(2018年)系列 第 50

[十分鐘學習] Swiper - 最新潮的幻燈片/跑馬燈效果

example1

Swiper是時下完整的幻燈片/跑馬燈套件,使用效能高,並可運用在行動裝置上及混和式App上,不但在最新版本的iOS上運作很好,在Android、Windows Phone 8和桌上型裝置上一樣虎虎生風;要注意的是,Swiper並不相容所有平台裝置,而是專注於時下主流平台裝置的相容性和效能上;同時Swiper也是Framework7Ionic Framework的組件一部分。

GitHub Star: 15,000
Javascripting Overall: 93%
瀏覽器: ChromeFirefoxIE10+
RWD: 支援
License: MIT


《安裝》

  • CDN

    <!-- Swiper v4.1.0 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.esm.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.esm.bundle.js"></script>
    
  • npm

    $ npm install swiper
    
  • Bower

    $ bower install swiper
    
  • Meteor

    $ meteor add nolimits4web:swiper
    

《範例》

  • 包含捲軸、分頁和上下按鈕的幻燈片

    example1

    <!-- 幻燈片內容 -->
    <div class="swiper-container">
    	<!-- 外層(必要) -->
    	<div class="swiper-wrapper">
    		<!-- 幻燈片內容 -->
    		<div class="swiper-slide"><img src="https://6666design.com/pic/it2018/example/1@320x200.jpg"></div>
    		<div class="swiper-slide"><img src="https://6666design.com/pic/it2018/example/2@320x200.jpg"></div>
    		<div class="swiper-slide"><img src="https://6666design.com/pic/it2018/example/3@320x200.jpg"></div>
    		<div class="swiper-slide"><img src="https://6666design.com/pic/it2018/example/4@320x200.jpg"></div>
    		<div class="swiper-slide"><img src="https://6666design.com/pic/it2018/example/5@320x200.jpg"></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>
    <style>
    	.swiper-container {
    		/* 設定幻燈片寬度跟高度 */
    		width: 320px;
    		height: 200px;
    	}
    </style>
    <script>
    	var mySwiper = new Swiper ( ".swiper-container", {
    		// 參數設定[註1]
    		direction: "vertical", // 方向
    		loop: true,  // 循環
    		pagination: {
    			el: ".swiper-pagination",  // 分頁物件
    		},
    		navigation: {
    			nextEl: ".swiper-button-next", // 上一頁按鈕物件
    			prevEl: ".swiper-button-prev", // 下一頁按鈕物件
    		},
    		scrollbar: {
    			el: ".swiper-scrollbar", // 捲軸物件
    		}
    	})
    </script>
    

    [註1]

    參數 描述
    direction 方向
    loop 循環
    pagination.el 分頁物件
    navigation.nextEl 上一頁按鈕物件
    navigation.prevEl 下一頁按鈕物件
    scrollbar.el 捲軸物件
  • 3D轉動的幻燈片

    <!-- 幻燈片內容 -->
    <div class="swiper-container">
    	<!-- 外層(必要) -->
    	<div class="swiper-wrapper">
    		<!-- 幻燈片內容 -->
    		<div class="swiper-slide"><img src="https://6666design.com/pic/it2018/example/1@320x200.jpg"></div>
    		<div class="swiper-slide"><img src="https://6666design.com/pic/it2018/example/2@320x200.jpg"></div>
    		<div class="swiper-slide"><img src="https://6666design.com/pic/it2018/example/3@320x200.jpg"></div>
    		<div class="swiper-slide"><img src="https://6666design.com/pic/it2018/example/4@320x200.jpg"></div>
    		<div class="swiper-slide"><img src="https://6666design.com/pic/it2018/example/5@320x200.jpg"></div>
    	</div>
    	<!-- 上/下一頁按鈕(非必要) -->
    	<div class="swiper-button-prev"></div>
    	<div class="swiper-button-next"></div>
    </div>
    <style>
    	.swiper-container {
    		/* 設定幻燈片的寬度跟高度 */
    		width: 320px;
    		height: 200px;
    	}
    </style>
    <script>
    	var mySwiper = new Swiper ( ".swiper-container", {
    		// 參數設定[註1]
    		effect: "cube", // 效果
    		grabCursor: true, // 游標為手掌
    		cubeEffect: {
    			shadow: true, // 顯示陰影
    			slideShadows: true, // 當滑動時,則顯示動陰影
    			shadowOffset: 20, // 陰影偏移
    			shadowScale: 0.94, // 陰影比例
    		},
    		navigation: {
    			nextEl: ".swiper-button-next", // 上一頁按鈕物件
    			prevEl: ".swiper-button-prev", // 下一頁按鈕物件
    		}
    	})
    </script>
    

    [註1]

    參數 描述
    effect 效果
    grabCursor 游標為手掌
    cubeEffect.shadow 顯示陰影
    cubeEffect.slideShadows 當滑動時,則顯示動陰影
    cubeEffect.shadowOffset 陰影偏移
    cubeEffect.shadowScale 陰影比例
    navigation.nextEl 上一頁按鈕物件
    navigation.prevEl 下一頁按鈕物件

《延伸》

  1. Swiper - Most Modern Mobile Touch Slider
  2. nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions

上一篇
[十分鐘學習] List.js - 資料排序
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

1 則留言

0
丹尼
iT邦研究生 4 級 ‧ 2018-02-07 20:35:36

讚唷

我要留言

立即登入留言