iT邦幫忙

2018 iT 邦幫忙鐵人賽
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 - 資料排序
下一篇
[十分鐘學習] toastr - 簡易提示訊息
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

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

讚唷

我要留言

立即登入留言