iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
2
Modern Web

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

[十分鐘學習] JQuery lightSlider - 圖片滑起來

example1

JQuery lightSlider是一套輕量且響應式的跑馬燈/幻燈片、附有縮圖導覽。另有相本功能、垂直跑馬燈,應用層面廣泛

GitHub Star: 1,500
Javascripting Overall: 57%
瀏覽器: ChromeFirefoxIE7+
RWD: 支援
License: MIT


《安裝》

  • CDN

      <!-- jQuery v1.9.1 -->
      <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <!-- JQuery lightSlider v1.1.6 -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.css" rel="stylesheet"  />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>
    
  • npm

      $ npm install lightslider
    
  • Bower

      $ bower install lightslider
    

《範例》

  • 跑馬燈效果

      <ul id="example">
      	<li><img src="【圖片URL】" /></li>
      	...
      </ul>
      <script>
      	$( "#example" ).lightSlider({ 
      		// 參數設定[註1]
      		slideWidth: 320, // 物件寬度
      		speed: 400, // 切換速度
      		pause: 2000, // 當等待時間超過此時,則自動切換
      		auto: true, // 自動切換
      		item: 3, // 顯示數量
      		responsive : [ 
      			{
      				breakpoint: 960, // 當螢幕大於此寬度時,則啟用此設定值
      				settings: {
      					item: 2, // 顯示數量
      					slideMove: 1 // 一次切換數量
      				}
      			},
      			{
      				breakpoint: 640, // 當螢幕大於此寬度時,則啟用此設定值
      				settings: {
      					item: 1, // 顯示張數
      					slideMove: 1 // 一次切換數量
      				}
      			}
      		]
      	});
      </script>
    

    [註1]

    參數 描述
    slideWidth 物件寬度
    speed 切換速度
    pause 當等待時間超過此時,則自動切換
    auto 自動切換
    item 顯示數量
    responsive.breakpoint 當螢幕大於此寬度時,則啟用此設定值
  • 相本模式

    example1

      <div id="wrapper">
      	<ul id="example">
      		<!-- 
      			屬性設定[註2]
      			data-thumb: 縮圖URL
      			data-src: 原圖URL
      		-->
      		<li data-src="【縮圖URL】"  data-src="【原圖URL】"><img src="【圖片URL】" /></li>
      		...
      	</ul>
      </div>
      <style>
      	#wrapper{
      		width: 500px;
      	}
      </style>
      <script>
      	$( "#example" ).lightSlider({ 
      		// 參數設定[註1]
      		gallery: true, // 相本模式
      		item: 1, // 顯示數量
      		loop: true, // 無限循環
      		thumbItem: 10, // 縮圖數量
      		slideMargin: 0, // 間隔寬度
      		enableDrag: false // 當左右拖曳時,則切換上/下項目
      	});
      </script>
    

    [註1]

    參數 描述
    gallery 相本模式
    item 顯示數量
    loop 無限循環
    thumbItem 縮圖數量
    itslideMarginem 間隔寬度
    enableDrag 當左右拖曳時,則切換上/下項目

    [註2]

    屬性 描述
    data-thumb 縮圖位置
    data-src 原圖位置

《延伸》

  1. JQuery lightSlider
  2. sachinchoolur/lightslider: JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation

上一篇
[十分鐘學習] Lazy Load - 上班打卡外,圖片也要壓線載入
下一篇
[十分鐘學習] ALERTIFY.js - 提示訊息美肌
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言