Question

我试图为第一个和最后一个项添加一个非活动类。

我的HTML代码：

<div id="owl-nav">
    <div class="owl-carousel">
        <div class="item">text</div>
    </div>
</div>

感谢您的帮助。

Answer 1

编辑：以下更改应允许您使用回调来动态获取项目数并定位“项目”的第一个和最后一个实例。

也许使用Callback data选项来访问图像索引位置，如果它是0或最后一个子项的任何数字（轮播中的0个索引项的数量），请添加“不活动”类使用addClass / removeClass方法的元素。

http://www.owlcarousel.owlgraphic.com/docs/api-events.html

$('.owl-carousel').owlCarousel({
    onChange: callback
});

function callback(event) {
var element   = event.target;   // DOM element, in this example .owl-carousel
var items     = event.item.count;     // Number of items
var itempos      = event.item.index;     // Position of the current item
var firstchild = $('.item:nth-child(1)'); 
var lastchild = $('.item:last-child');
    if(item === 0){
      firstchild.addClass("inactive");
    }else if(itempos  === items){
      lastchild.addClass("inactive");
    }
}

如何为第一个和最后一个项应用非活动类

1 个答案: