輕鬆使用jQuery 圖片輪播外掛 Owl Carousel 嵌入至網頁與部落格(含CDN教學)

近年來由於行動裝置的普及,Owl Carousel應該可以說是使用率非常頻繁的圖片輪播js外掛,不僅可顯示自適應(RWD)版面,還支援手指觸控操作的效果,並可在手機直接用手勢滑動輪播圖片,效果十分強大(而且免費的最好用啊!)。

Owl Carousel 的功能特點:

完整自適應版面(RWD)
支援多種特殊輪播模式(例如由右到左、不同尺寸圖片輪播、滑鼠拖拉效果…等)
可一次輪播數張圖片、Youtube 影片、動畫
可用滑鼠、手勢來拖拉圖片
可自訂各種參數(循環輪播、輪播時間…等)
免費,並可商業使用

各種 DEMO 效果(Owl Carousel 2 官網)

以Owl Carousel官網的Basic 為例

網頁直接插入以下CDN連結程式碼即可使用:
其中jquery.min.js檔,若原本就有連結,就不需再匯入一次囉!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.default.min.css"></link>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/owl.carousel.min.js"></script>

 

HTML碼(以輪播六張,自行設定圖片寬度為例)

<div class="col-md-12 owl-carousel owl-theme">
<div class="item" style="max-width: 450px; margin-right: 10px;"><h4>1</h4><img src="img/1.png"></div>
<div class="item" style="max-width: 450px; margin-right: 10px;"><h4>2</h4><img src="img/2.png"></div>
<div class="item" style="max-width: 350px; margin-right: 10px;"><h4>3</h4><img src="img/3.png"></div>
<div class="item" style="max-width: 350px; margin-right: 10px;"><h4>4</h4><img src="img/4.png"></div>
<div class="item" style="max-width: 350px; margin-right: 10px;"><h4>5</h4><img src="img/5.png"></div>
<div class="item" style="max-width: 350px; margin-right: 10px;"><h4>6</h4><img src="img/6.png"></div>
</div>

 

放入Java Script程式碼

$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,   /* 控制列 */
autoWidth:true,   /* 可自行設定輪播寬度 */
items:3,  /* 一頁出現的張數 */
autoplay:true,  /* 自動輪播 */
autoplayTimeout:1500,  /* 輪播速度 */
autoplayHoverPause:true
});
$('.play').on('click',function(){
owl.trigger('play.owl.autoplay',[1000])
})
$('.stop').on('click',function(){
owl.trigger('stop.owl.autoplay')
})

範例DEMO網頁

您可能也會喜歡…

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

%d 位部落客按了讚: