I'm trying to attach a javascript event to the slick slider next and back buttons. I've tried inspecting the page and seeing what they're called and calling the event on those classes but it doesn't recognize the click event.

Here is the function I'm trying to call:

var i = 0;
$('.slick-next').click(function(){
    console.log('next clicked');
    i++;
    console.log(i);
    if (i==1) {
        $('#people').css('filter', 'none');
    }
})

I've tried using '.slick-next::before' as well and that didn't work either

I'm trying to attach a javascript event to the slick slider next and back buttons. I've tried inspecting the page and seeing what they're called and calling the event on those classes but it doesn't recognize the click event.

Here is the function I'm trying to call:

var i = 0;
$('.slick-next').click(function(){
    console.log('next clicked');
    i++;
    console.log(i);
    if (i==1) {
        $('#people').css('filter', 'none');
    }
})

I've tried using '.slick-next::before' as well and that didn't work either

• javascript
• jquery

4 Answers 4

Need to add .on() method for the click of the button. That's because these next and previous arrow buttons are added later in the DOM by slick.js, and .on() can process events from descendant elements that are added to the document at a later time.

$('body').on('click', '.slick-arrow', function () {
    alert('click working')
})

here is the codepen example

$('.slick-next').click(function(e){
  console.log(e.target);
  $('#people').css('filter', 'none');
})

$('button.slick-next').click(function(e){
   console.log(e.target);
   // Action here
});

I ended up having to access the body and then the slick-next button because it was a psuedoelement and wasn't being found by the JS without first saying where it was.