Custom Slick Arrows-CodePudding

I am using Slick.js with my project and I want the buttons and dots to be inside the div. I've tried using putting a selector of the div on the javascript but whenever I do that button doesn't work. I've change some css code and I could put the next button inside the image but it seems that the previous button is being displayed below the image on the slick. I'm not sure why this happen. Thank you.

$('.sliding-announcement').slick({
    dots: true,
    infinite: true,
    speed: 100,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: true,
    variableWidth: true,
    prevArrow: '<button ></button>',
  nextArrow: '<button ></button>',
    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%;
  margin-top: -15px;
}
.prev-arrow{
    background: red;
  right: 10px;
  width: 0;
  height: 100%;
  border-left: 0 solid transparent;
  border-right: 15px solid #113463;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.next-arrow{
    background: red;
  right: 0px;
  width: 0;
  height: 0;
  border-right: 0 solid transparent;
  border-left: 15px solid #113463;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

<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">

    <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/789/536/354.jpg?hmac=bACXXOVJWzwDX0UtvGkk0xqXo1F2fk2N9XxBgPW6Jwg">
    </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/789/536/354.jpg?hmac=bACXXOVJWzwDX0UtvGkk0xqXo1F2fk2N9XxBgPW6Jwg">
    </div>

</div>

CodePudding user response：

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>