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