近年來由於行動裝置的普及，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')
})
