在HTML中定义猫头鹰轮播参数（具有类或数据属性） [英] Define owl carousel parameters in HTML (with class or data attribute)

问题描述

我有一个猫头鹰传送带几页。我希望能够在HTML代码中设置一些参数（使用类或数据属性）。

HTML，我已经创建了下面的jQuery代码：

$ $ $ $。owl-carousel）each（function（index）{
var item_no = $（this）.data（'slides'）;
var autoplay = $（this）.data（'autoplay'）;
$（。owl-carousel ）.owlCarousel（{
items：items_no，
autoplay：autoplay
}）;
}）;

正如您所预料的那样，它不起作用。来自第一只猫头鹰旋转木马的参数适用于所有旋转木马。我不知道如何使它工作。下面是我的尝试的小提琴。

http：/ /jsfiddle.net/t2gj8eg2/4/

我会非常感谢任何能够为我解决问题的人。在此先感谢

解决方案

应该是：

 < code $ $（。owl-carousel）。each（function（index）{
 var items_no = $（this）.data（'slides'）; 
 var autoplay = $（这个）.data（'autoplay'）; 
 $（this）.owlCarousel（{//使用$（this）
 items：items_no，
 autoplay：autoplay 
}） ; 
}）; 
  

I have a page with few owl carousels. I would like to be able to set some parameters for these owl carousels in HTML code (using a class or data attribute).

Assuming I have two data attributes defined in my HTML, I have created following jQuery code:

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

And as you may expect it is not working. The parameters from first owl carousel are applied to all carousels. I have no idea how to make it work. Below is a fiddle with my attempt.

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

I would be very grateful for anyone that is able to fix it for me. Thanks in advance

解决方案

Should be:

$(".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
    });
});

这篇关于在HTML中定义猫头鹰轮播参数（具有类或数据属性）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！