Add Custom Buttons on Slick Carousel

Add custom buttons on Slick Carousel

I know this is an old question, but maybe I can be of help to someone, bc this also stumped me until I read the documentation a bit more:

prevArrow string (html|jQuery selector) | object (DOM node|jQuery
object) Previous
Allows you to select a node or customize the HTML for the "Previous"
arrow.

nextArrow string (html|jQuery selector) | object (DOM node|jQuery
object) Next Allows
you to select a node or customize the HTML for the "Next" arrow.

this is how i changed my buttons.. worked perfectly.

  $('.carousel-content').slick({
      prevArrow:"<img class='a-left control-c prev slick-prev' src='../images/shoe_story/arrow-left.png'>",
      nextArrow:"<img class='a-right control-c next slick-next' src='../images/shoe_story/arrow-right.png'>"
  });

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

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

Add additional Next button to a Slick Slider

Check out the https://kenwheeler.github.io/slick/ Methods section.

Possible Solution

Add your button <button id="nextSlideBtn">Next Slide Button</button> inside the first slide.

ES6

const button = document.getElementById('nextSlideBtn');
const nextSlide = (slider) => {
  $(slider).slick('slickNext');
};
button.addEventListener('click', () => {
  nextSlide(<YOUR SLIDER>);
});

ES5

var button = document.getElementById('nextSlideBtn');
var nextSlide = function nextSlide(slider) {
  $(slider).slick('slickNext');
};
button.addEventListener('click', function () {
  return nextSlide(<YOUR SLIDER>);
});

Custom Slick Arrows

You should work with pseudo classes for this. Add a wrapper around your slider with a relative positioning to it so you can absolute position your arrows.

Below a working example:

$('.sliding-announcement').slick({
    dots: true,
    infinite: true,
    speed: 100,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: true,
    variableWidth: true,
    prevArrow: $('.prev-arrow'),
    nextArrow: $('.next-arrow'),
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                infinite: true,
                dots: true
            }
        },
        {
        breakpoint: 600,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        },
        {
        breakpoint: 480,
        settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
    ]
});

.button-slider {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.prev-arrow {
    left: 10px;
}

.next-arrow {
    right: 10px;
}

.slide-arrow::after {
    content: '';
    background: red;
    width: 0;
    height: 100%;
}

.prev-arrow::after {
    border-left: 0 solid transparent;
    border-right: 15px solid #113463;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.next-arrow::after {
    border-right: 0 solid transparent;
    border-left: 15px solid #113463;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.sliding-announcement-wrap {
    position: relative;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
<div class="sliding-announcement-wrap">
    <div class="sliding-announcement">

        <div class="sliding-annonuncement-image-container">
            <img class="sliding-annonuncement-image" src="https://i.picsum.photos/id/789/536/354.jpg?hmac=bACXXOVJWzwDX0UtvGkk0xqXo1F2fk2N9XxBgPW6Jwg">
        </div>
        <div class="sliding-annonuncement-image-container">
            <img class="sliding-annonuncement-image" src="https://i.picsum.photos/id/1035/536/354.jpg?hmac=N7LdfGCyj7EjI-_m2RvtgMrZ-SKgYmtwPBf_dd7ZDf8">
        </div>
        <div class="sliding-annonuncement-image-container">
            <img class="sliding-annonuncement-image" src="https://i.picsum.photos/id/789/536/354.jpg?hmac=bACXXOVJWzwDX0UtvGkk0xqXo1F2fk2N9XxBgPW6Jwg">
        </div>
        <div class="sliding-annonuncement-image-container">
            <img class="sliding-annonuncement-image" src="https://i.picsum.photos/id/1035/536/354.jpg?hmac=N7LdfGCyj7EjI-_m2RvtgMrZ-SKgYmtwPBf_dd7ZDf8">
        </div>

    </div>

    <button class="button-slider slide-arrow prev-arrow"></button>
    <button class="button-slider slide-arrow next-arrow"></button>
</div>

Custom next button for slick slider

Add unique ids+ class to each slider & navigation

$('.slider').slick({
  dots: true,
  nextArrow: $('#next')
});
$('.slider2').slick({
  dots: true,
  nextArrow: $('#next2')
});

http://codepen.io/anon/pen/QKNxNj

for your second example you change the navigation id to a class

$('.slider').slick({
  dots: true
});

$('.next').click(function(){
  $(this).prev().slick('slickNext');
});

http://codepen.io/anon/pen/vXGAxb

---

Related Topics