添加箭頭和自動播放到貓頭鷹傳送帶模板

Question

我下載了一個模板owl.carousel.min.js - 我不知道如何添加自動播放和箭頭。

它在http://testing.r2group.co.za/Test/index.html左右的測試服務器上。我會很感激任何幫助，因爲我對HTML很熟練，但JS超越了我。 （爲什麼我下載了一個模板）

Answer 1

您是否找到了關於如何使用傳送帶的文檔？那是一個開始的好地方。

貓頭鷹是我正在使用的主題的一部分。看起來像這個JavaScript包含在旋轉木馬之後。

<script> 
jQuery(function($){ 
    $("#latest_news .owl-carousel").owlCarousel({ 
     lazyLoad: true, 
     responsiveRefreshRate: 50, 
     slideSpeed: 500, 
     paginationSpeed: 500, 
     scrollPerPage: true, 
     stopOnHover: true, 
     rewindNav: true, 
     rewindSpeed: 600, 
     pagination: true, 
     navigation: false, 
     autoPlay: true, 
     singleItem: true 
    }); 
}); 
</script> 

這告訴瀏覽器用jQuery啓動一個新的腳本。

jQuery(function($){ 
    //code 
}); 

這個函數的內部特定於貓頭鷹傳送帶。

$("latest_news .owl-carousel")選擇適當的元素。這是您將使用您自己的CSS選擇器來獲取滑塊的位置。

它正在傳遞滑塊參數的JavaScript對象。對於您的自動播放，您可以給它

$("#YOUR-ELEMENT .owl-carousel").owlCarousel({ 
    autoplay: true 
}); 

箭頭也通過此對象中的設置進行描述。看起來像左/右箭頭可以加入這樣的：

$("#YOUR-ELEMENT .owl-carousel").owlCarousel({ 
    navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"] 
}); 

所以，至少讓你的箭和自動播放，您的腳本應該是這樣的：

<script> 
    jQuery(function($){ 
     $("#YOUR-ELEMENT .owl-carousel").owlCarousel({ 
      autoplay: true, 
      navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"] 
     }); 
    }); 
</script> 

會值得看看你可以更改哪些其他設置以實現更大的自定義。例如，slideSpeed和rewindSpeed可能是熟悉使用javascript的好地方。