在HTML中定義貓頭鷹傳送帶參數（帶類或數據屬性）

Question

我有一個頁面，只有幾個貓頭鷹傳送帶。我希望能夠用HTML代碼（使用類或數據屬性）爲這些貓頭鷹輪播設置一些參數。

假設我在我的HTML定義了兩個數據屬性，我已經創建了下面的jQuery代碼：

$(".owl-carousel").each(function(index) { 
    var items_no = $(this).data('slides'); 
    var autoplay = $(this).data('autoplay'); 
    $(".owl-carousel").owlCarousel({ 
     items : items_no, 
     autoplay: autoplay 
    }); 
}); 

正如你可能希望它不工作。來自第一隻貓頭鷹旋轉木馬的參數適用於所有旋轉木馬。我不知道如何使它工作。下面是我的嘗試的小提琴。

http://jsfiddle.net/t2gj8eg2/4/

我會是任何人都能夠解決它，我非常感激。在此先感謝

Answer 1

應該是：

$(".owl-carousel").each(function (index) { 
    var items_no = $(this).data('slides'); 
    var autoplay = $(this).data('autoplay'); 
    $(this).owlCarousel({ // use $(this) 
     items: items_no, 
     autoplay: autoplay 
    }); 
}); 

Answer 2

這裏是用數據更簡單的方法與貓頭鷹旋轉木馬屬性：

var oc = $('.owl-carousel'); 
    var ocOptions = oc.data('carousel-options'); 
    var defaults = { 
    loop:   true, 
    nav:    false, 
    autoplay:  true, 
    } 
    oc.owlCarousel($.extend(defaults, ocOptions)); 

你的HTML應該是這樣的：

<div class="owl-carousel" data-carousel-options='{"autoplay":"true","autoplayTimeout":"6000","items":"2"}'> ... </div> 

在上面的例子中，我已經在我的defaults變量中定義了一些默認選項，然後I o用數據屬性來表示它們以及添加更多內容。

這可以通過使用jQuery.extend()。文檔可以在這裏找到：https://api.jquery.com/jquery.extend/