How to customize 'Previous' and 'Next' buttons in 'Slick' slider

user_16968216 0
Viewed 51

I created a carousel using 'Slick' but I want to change the 'Previous' and 'Next' buttons into arrows. How do I do that?

This is my code:

$('.horizontal').slick({
  slidesToShow: 2,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 100,
});
#slider img {
  width: 350px;
  height: 350px;
  margin-right: 100px;
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
  <div class="horizontal">
    <img src="images/imags/1.jpg" class="before_after">
    <img src="images/imags/2.jpg" class="before_after">
    <img src="images/imags/3.jpg" class="before_after">
    <img src="images/imags/4.jpg" class="before_after">
    <img src="images/imags/5.jpg" class="before_after">
    <img src="images/imags/6.jpg" class="before_after">
    <img src="images/imags/8.jpg" class="before_after">
    <img src="images/imags/9.jpg" class="before_after">
    <img src="images/imags/10.jpg" class="before_after">
    <img src="images/imags/11.jpg" class="before_after">
    <img src="images/imags/12.jpg" class="before_after">
    <img src="images/imags/13.jpg" class="before_after">
    <img src="images/imags/14.jpg" class="before_after">
    <img src="images/imags/15.jpg" class="before_after">
    <img src="images/imags/16.jpg" class="before_after">
  </div>
</section>

slick.js css html jquery javascript
1 Answers

You can use prevArrow and nextArrow to customize the code from your arrows. Something like this:

$('.horizontal').slick({
  slidesToShow: 2,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 100,
  prevArrow: '<button type="button" class="slick-custom-arrow slick-prev"> < </button>',
  nextArrow: '<button type="button" class="slick-custom-arrow slick-next"> > </button>'
});

Then you style it with css. You can change the button elements to an a, or anything you like. Also you can append the arrows elsewhere, outside of your carousel, with appendArrows. Just select an element and pass it as a parameter.

var $element = $('.js-arrow-wrapper');

$('.horizontal').slick({
  slidesToShow: 2,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 100,
  appendArrows: $element
});
user_41427520
Related