Travel:最新消息

Owl Carousel:一版二版

Owl Carousel CDN(使用2.0.0-beta.2.4版)、Font Awesome CDN

Owl Carousel 的功能特點:

  • 自適應版面
  • 支援多種特殊輪播模式
  • 可循環輪播
  • 一個畫面可一次輪播數張圖片
  • 可用滑鼠、手勢來拖拉圖片
  • 可輪播 Youtube 影片
  • 可自訂各種參數、提供 API
  • 免費、可商業使用
<!--Owl Carousel  Start-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.green.css">
<!--Owl Carousel  end-->
<div class="owl-carousel">
  <div class="item"><img src="../img/slider_L/slider01.jpg" title="Czech 捷克蜜月 一生一次 無可取代<br>捷克蜜月團,團團額滿!
象徵我們的蜜月新人天長地久到白首!"/></div>
  <div class="item"><img src="../img/slider_L/slider02.jpg" title="KENYA 聆聽東非的心跳 大自然的呼喚 肯亞動物大遷徙<br>野生動物與我們不期而遇,眼神交會瞬間無限怠動" /></div>
  <div class="item"><img src="../img/slider_L/slider03.jpg" title="DUBAI 法拉利樂園 棕櫚島皇宮. 星帆船酒店‧杜拜" /></div>
  <div class="item"><img src="../img/slider_L/slider04.jpg" title="Netherlands 荷蘭風車水世界 鬱金香花季" /></div>
  <div class="item"><img src="../img/slider_L/slider05.jpg" title="Italy 義大利 賽格威夜遊羅馬 發現義大利不同角度的美" /></div>
</div>
$('.owl-carousel').owlCarousel({
	margin: 0, 
	loop:true,
	items:1,
	nav:true,
	navText:["<i class='fa fa-arrow-left'></i>","下一頁"]
});

參考連結