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

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

• javascript
• jquery
• slick.js

• Same here. Can you find the problem? – Vahid Commented Sep 4, 2015 at 15:33

1 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 bination with the afterChange event.

Disclaimer: used version in this answer: 1.5.9