Arrows appended inside `.slickSlide` do not work

I have a carousel I’m working on which has distinct sections inside each slide which move around at certain breakpoints. I need the carousel’s arrows to appear inside one of these sections of each slide. Using appendArrows does add the arrows to each slide’s section, but the arrows don’t work. Without looking at the Slick code responsible for handling the arrows, it doesn’t seem like there should be a technical limitation here, as jQuery is quite capable of registering a click handler on all elements returned by a given selector.

http://jsfiddle.net/narthur/0nebp4qk/5/

Steps to reproduce the problem

1. Append arrows anywhere inside .slick-slide using appendArrows option.
2. Notice that the arrows do not work.

What is the expected behaviour?

Arrows appended inside .slick-slide should function the same as arrows appended outside .slick-slide.

What is observed behaviour?

Arrows appended inside .slick-slide do nothing when clicked.

More Details

• Which browsers/versions does it happen on? Chrome 70.
• Which jQuery/Slick version are you using? Slick 1.8.0; jQuery 1.9.1
• Did this work before? No.

[su-narthur]

I was able to fix my specific issue with the following code:

jQuery('#carousel_id .slick-prev').on('click', function(){
	jQuery('#carousel_id').slick("slickPrev");
});
jQuery('#carousel_id .slick-next').on('click', function(){
	jQuery('#carousel_id').slick("slickNext");
});

This issue proposes that a similar fix be made in the library itself, so that appendArrows works inside .slick-slide without any extra work required.

[MaideAkdede]

❗️ April 2022 : Issue still not been solved.

@su-narthur 's code work perfectly, thank you.

FYI: I had to wrap the code otherwise it didnt work

$(function () {
$('.carousel .slick-prev').on('click', function () {
        $('.carousel').slick("slickPrev");
    });
    $('.carousel .slick-next').on('click', function () {
        $('.carousel').slick("slickNext");
    });
});