Disabling OwlCarousel at previous to last element

Question

I want to display items using OwlCarousel, I have 12 items, and I use stagePadding, so you can always see a small portion of the next and the previous item.

     jQuery(document).ready(function() {
        jQuery('#matching_carousel').owlCarousel({
            stagePadding: 80,
            loop: true,
            margin: 20,
            items: 1,
            center: true,
            nav: false,
            responsive:{
                0:    {stagePadding: 80},
                700:  {stagePadding: 120},
                1200: {stagePadding: 170},
            }
        });
    });

Is there a way to not allow to scroll to the last element, i.e. whenever the previous to last element is visible in the center, no touch / mouse-dragging or forwarding using the navigation buttons is possible anymore?

I want to give the impression that there might follow more items after it, hence the last item should stay partially visible because of stagepadding, but not be allowed to come into the center.

Thanks!

score 1 · Answer 1 · answered Oct 01 '21 at 20:28

I think there must be callback:

jQuery('#matching_carousel').on('changed.owl.carousel', function(event) {
    ...
});

And inside callback let's try to detect by such condition as:

if (event.item.index == (event.item.count - 1)) {
   // if current item index less by 1 point then last item index
      ...
   // disable drag, dots, buttons here
   this.options.mouseDrag = false;
   this.options.touchDrag = false;
}

It's just idea for trying)) Both code in one:

jQuery('#matching_carousel').on('changed.owl.carousel', function(event) {
       if (event.item.index == (event.item.count - 1)) {
       // if current item index less by 1 point then last item index
       // disable drag, dots, buttons here
       this.options.mouseDrag = false;
       this.options.touchDrag = false;
       ...
    }
});

Disabling OwlCarousel at previous to last element

1 Answers1