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

Question

I'm trying to add an inactive class for the first and last item.

My HTML code :

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

Thanks for your help.

Answer 1

Edit: The following changes should allow you to use the callback to dynamically grab the number of items and target the first and last instance of the "items".

Perhaps use the Callback data option to access the image index position, and if it is 0 or whatever number the last child is (the number of 0 indexed items in your carousel), add the class "inactive" to the element using the addClass/removeClass methods.

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