Change the Arrow Buttons in Slick Slider

Change Slick Slider Arrow Position

Add Class on your Slick function like

prevArrow: $(".pp2"),
nextArrow: $(".nn2"),

& Below button add with style :

<button class="pp2">back</button>
<button class="nn2">forward</button>

How to change Slick Slider default arrow using data attributes?

You can add html for your custom button and include selector of this element as prevArrow value like this:

<div class="has-slick-slider" data-slick='{"slidesToShow": 1, "arrows": true, "prevArrow": "#custom-prev-arrow"}'>
    ...
</div>
<button id="custom-prev-arrow">...</button>

Hope it helps.

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>

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 add your customise arrows in slick slider JS using CSS

Use CSS like below,you can change the dimension of images as per your custom   arrow images.

<pre>

.slick-next::before {
        background: url('../img/right-arrow.png') no-repeat;
        content: "";
        display: block;
        height: 15px;
        width: 15px;
}
.slick-prev {
        background: url('../img/left-arrow.png') no-repeat;
        content: "";
        display: block;
        height: 15px;
        width: 15px;
}
</pre>

Can't change nextArrow and prevArrow in Slick Carousel

Found the answer in the comments of this existing StackOverflow article -- user Yoan's comment is the one that worked best for my implementation of Slick.

How to style React Slick carrousel's arrows?

react-slick is passing in its own styles which you can spread into the style object of the <Button> (see: https://react-slick.neostack.com/docs/example/custom-arrows). You can then add or override any styles you wish.

The fix below uses the code from your Code Sandbox (working fork here: https://codesandbox.io/s/lucid-roentgen-bie3j?file=/src/App.js).

const Arrow = ({ className, style, onClick }) => (
  <Button style={{...style, left: 0, backgroundColor: 'red'}} onClick={onClick} className={className}>
    <div>back</div>
  </Button>
);

const settings = {
  ...
  prevArrow: <Arrow />
};