自定义光滑箭头

Question

我在我的项目中使用 Slick.js，我希望按钮和点位于 div 内。我试过将 div 的选择器放在 javascript 上，但每当我这样做时，该按钮都不起作用。我已经更改了一些 css 代码，我可以将下一个按钮放在图像中，但上一个按钮似乎显示在 slick 上的图像下方。我不确定为什么会这样。谢谢。

$('.sliding-announcement').slick({
    dots: true,
    infinite: true,
    speed: 100,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: true,
    variableWidth: true,
    prevArrow: '<button class="button-slider slide-arrow prev-arrow"></button>',
  nextArrow: '<button class="button-slider slide-arrow next-arrow"></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>

Answer 1

您应该为此与 pseudo 类合作。在滑块周围添加一个带有 relative 定位的包装器，这样您就可以 absolute 定位箭头。

下面是一个工作示例：

$('.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 Slick Arrows

html

javascript

css

jquery

slick.js