Add next prev button on smooth carousel

Question

I recently added a pencil for slices in my project.

Reading the document I saw is the slick Prev() and slick Next() method.

But I ask you how to use this method. I tried this for a long time, but actually I can not figure out how to use this with the html button .

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

I tried this way.

Answer 1

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

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

---

Starting with version 1.4 and later, use:

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

Answer 2

The best way I've found to do this. You can delete your HTML code and place it 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>' }); 

Answer 3

Mine is the same as above, but maybe a little different, and I think it’s 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> 

Answer 4

You can do the same if the slickPrev function does not work. You can pass the name of the function as a parameter to highlight.

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

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 added a boot button, you can also add images or icons.

nextArrow - Next Allows you to select a node or configure HTML code for the Next arrow. prevArrow - Previous Allows you to select a site or customize the HTML code for the back arrow.

You can find the json nextArrow and prevArrow properties above in the json _.defaults object inside the un minimized slick.js file.

Answer 6

• Initialize your slider in the script file and add the settings you want:

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

2. Class styles slick-prev and slick-next