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

How to apply an inactive class for the first and last item

本文关键字：项目 应用 非活动 最后一个 第一个      更新时间：2023-09-26

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

我的网页代码 ：

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

感谢您的帮助。

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

也许使用 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");
    }
}
相关文章：