Slick edge event not triggering

Question

I have this is script;

var $carousel = $("[data-carousel]");

$carousel.on('edge', function(event, slick, direction){
  console.log("edge");
});

$carousel.slick({
  slidesToShow: 4,
  slidesToScroll: 4,
  accessibility: false,
  draggable: false,
  infinite: false,
  prevArrow: $("[data-carousel-prev]"),
  nextArrow: $("[data-carousel-next]"),
  responsive: [
    {
      breakpoint: 1370,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    }
  ]
});

But when reaching the edge, it does not trigger any edge event following the docs seems ok I'm using slick 1.5.6

Answer 1

The edge event only fires when overscrolling happens.

Such overscrolling can only happen if draggable is set to true and you drag over the last slide.

Using the buttons will not trigger the edge event.

If you are looking to execute some code if the "next" button is triggered at the last slide, use the indexes in combination with the afterChange event.

Disclaimer: used version in this answer: 1.5.9