CODEWITHSUNDEEP
jquerycarouselslick.js
Rasel mahmud
Rasel mahmud

Reputation: 141

Add next prev button on slick carousel

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.

Upvotes: 13

Views: 87646

Answers (6)

Ilimkan Omurzakova
Ilimkan Omurzakova

Reputation: 313

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>

Upvotes: 11

Salike Hassan
Salike Hassan

Reputation: 101

    $("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.

Upvotes: 4

Delorme Grant
Delorme Grant

Reputation: 403

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>'
});

Upvotes: 6

Andre Nimczick
Andre Nimczick

Reputation: 19

  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>'
});

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

Upvotes: 0

Anima-t3d
Anima-t3d

Reputation: 3565

$('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');
});

Upvotes: 30

Sandeep Gupta
Sandeep Gupta

Reputation: 380

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');
});

Upvotes: 4

Related Questions