I have a request to change the old website which uses jQuery OwlCarousel v1.3.3 and the client wants that when the user reaches the last item in the list it should go to custom page or blog list page where it will show all the items of the blog

When Item reaches the last item '' disabled class is added to this <div > at this point it should go to the blog list page from the home page such as www.example.com/blog

Codepen Demo

How can I observe the owl-next item inside owl-demo so that when class **disabled** is added to owl-next so I can trigger a function that will take it to a different page?

CodePudding user response：

You can just add a callback to the afterAction option of Owl Carousel and check the visibleItems if it contains the last element of the carousel.

So the code will look like this:

$(document).ready(function () {
  var owl = $("#owl-demo");
  owl.owlCarousel({
    itemsCustom: [
      [0, 2],
      [450, 4],
      [600, 7],
      [700, 9],
      [1000, 10],
      [1200, 12],
      [1400, 13],
      [1600, 15]
    ],
    navigation: true,
    afterAction: afterAction
  });

  function afterAction() {
    if (this.owl.visibleItems.includes(this.owl.owlItems.length - 1))
      setTimeout(function () {
        location.href = "https://codepen.io/dreambold";  //=> Add the desired URL here
      }, 500);
  }
});

For the documentation, you can have a look at https://github.com/sergey-ovdienko/owlcarousel-v1

Live demo here: https://codepen.io/dreambold/pen/PoBJvdJ?editors=1011