Override slick carousel buttons action

Question

How can i change prev/next slick buttons action. I have a dynamically loadable carousel. So i need to add an image load action to buttons.

I tried to add action to slick declaration block like

    $(".mySlickCarousel").slick({
        prevArrow: function () {
           // code
        }
    })

tried this too:

$('.your-element .next-button').click(function(event){
  //load image
});

It doesn't work too. Well the browser get into the function only once. For a first time. Then ignoring

UPD: So, i solved it. As one guy told previously, you need to describe your own buttons

 prevArrow: $ ('.prev'),
 nextArrow: $ ('.next'),

and then do that

$(".next").on("click", function() {
    //your code
});

it's worked!

Is it possible to prevent the carousel to go to next slide if code in the listener defines that it should not do so ? — Itération 122442, Dec 26 '19 at 16:09

score 0 · Answer 1 · answered Mar 04 '16 at 06:41

0

Just load your load action to the next button of the carousel.

$('.your-element .next-button').click(function(event){
  //load image
});

Or use the slick callback event to have more input (currentSlide, nextSlide).

$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  //load image
});

answered Mar 04 '16 at 06:41

Thinh Nguyen

Yes, first one is the easiest way. This is the first thing i tried to. It doesn't work. I don't know why, but it doesn't even get into this function. The second. well, probably it will work. But its a lot of things i have todo because i have to know the direction (next or previous). And by the way it will be called by swipe too.. anyways... there will be the plan B. – Ilya Khudyakov Mar 04 '16 at 07:43

1 Answers1