文章/答案/技术大牛

发布

社区首页 >问答首页 >在HTML中定义owl carousel参数(具有class或data属性)

问在HTML中定义owl carousel参数(具有class或data属性)
EN

Stack Overflow用户

提问于 2014-10-20 17:37:35

回答 2查看 9.3K关注 0票数 1

我有一个页面，里面几乎没有猫头鹰的旋转木马。我希望能够在HTML代码中为这些owl carousel设置一些参数(使用类或数据属性)。

假设我在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
    });
});

正如你可能预期的那样，它不起作用。第一个owl轮播中的参数将应用于所有轮播。我不知道如何让它工作。下面是我尝试的一个小提琴。

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

我将非常感谢任何能够为我修复它的人。提前感谢

html

owl-carousel

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-10-20 17:41:53

应该是：

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

票数 5

Stack Overflow用户

发布于 2015-09-18 01:48:34

下面是通过Owl Carousel使用数据属性的一种更简单的方法：

  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变量中定义了一些默认选项，然后用数据属性覆盖了它们，并添加了更多属性。

这可以通过使用jQuery.extend()来实现。文档可以在这里找到：https://api.jquery.com/jquery.extend/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26462526

复制

相似问题

问在HTML中定义owl carousel参数(具有class或data属性)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML中定义owl carousel参数(具有class或data属性)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML中定义owl carousel参数(具有class或data属性)
EN