Add next prev button on slick carousel

Question

Recently I have added Slick carousel on my project.

Reading there document i have seen there is a method slick Prev() and slick Next().

But I am asking you how do I use this method. I have try this long time but I actually I can't understand how to use this with html button.

$('button.next').click(function() {
    $(this).slickPrev();
});

I have tried this way.

Commonage

Answer 1

$('button.next').click(function(){
    $("#yourid").slickPrev();
});

Try changing this to "#yourid" where the yourid is the id of the slider.

---

As of version 1.4 and later, use:

$('button.next').click(function(){
    $("#yourid").slick('slickPrev');
});

Undesigning

Quick note: As of version 1.4, you would need to use $("#yourid").slick('slickPrev'); instead. – Deaf

Answer 2

Mine is same as above but maybe a little different, and I think is better to understand:

$('.responsive').slick({
   dots: true,
   prevArrow: $('.prev'),
   nextArrow: $('.next'),
   infinite: false,
   speed: 300,
   slidesToShow: 3,
   slidesToScroll: 1,
   autoplay: true,
   autoplaySpeed: 5000,
});


<div class="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</div>
<div class="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>

Impedance

Answer 3

The Best way i Found to do that is this. You can remove my HTML and place yours there.

$('.home-banner-slider').slick({
    dots: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 300,
    slidesToScroll: 1,
    arrows: true,
    prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
    nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>'
});

Manfred

Answer 4

You can do the same if slickPrev function doesn't work. You can pass the function name as parameter to slick.

$('.next').click(function(){
    $("#sliderId").slick('slickNext');
});

Mohan

Answer 5

    $("selector").slick({
        nextArrow: '<button type="button" class="btn btn-primary">prev</button>',
        prevArrow: '<button type="button" class="btn btn-primary">next</button>'
    });

I have added bootstrap button, you can add images or icons also.

nextArrow - Next Allows you to select a node or customize the HTML for the "Next" arrow. prevArrow - Previous Allows you to select a node or customize the HTML for the "Previous" arrow.

you can find the above nextArrow and prevArrow json properties under the _.defaults json object inside the un-minified slick.js file.

Outwork

Answer 6

1. Initialize your slider in your script file and add the Settings you want like this:

$('.my-slider').slick({
    arrows: true,
    prevArrow: '<div class="slick-prev"><</div>',
    nextArrow: '<div class="slick-next">></div>'
});

2. Style the classes slick-prev and slick-next

Katharina