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

【问题标题】：How to apply an inactive class for the first and last item如何为第一项和最后一项应用非活动类
【发布时间】：2016-01-15 19:32:17
【问题描述】：

我正在尝试为第一项和最后一项添加非活动类。

我的 HTML 代码：

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

感谢您的帮助。

【问题讨论】：

标签： javascript button navigation slider owl-carousel

【解决方案1】：

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

也许使用 Callback data 选项来访问图像索引位置，如果它是 0 或最后一个孩子的任何数字（轮播中 0 索引项的数量），则将类“inactive”添加到使用 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");
    }
}

【讨论】：

回调有一个选项，它会自动为你返回元素的数量——不管它是否改变。在我链接你的页面上的回调数据元素下查看。希望这会有所帮助。
我为你更新了我的回复。它包括一个示例实现。由于我没有要测试的活动滑块，您可能会发现您必须对脚本进行一些更改 - 但这里是回调的实现方式。