如何在点列表中附加光滑的箭头？

Question

如何在 slick-dots ul 列表中附加 slick-arrow？我想要这样的结果：

我的 jQuery 代码

$(".my-slider").slick({
  arrows: true,
  pauseOnDotsHover: true,
  accessibility: true,
  responsive: [{
    arrows: false,
    breakpoint: 1024,
    nextArrow: $('.slick-dots .next'),
    prevArrow: $('.slick-dots .previous')
  }]
});
$("<li class='next'></li>").prependTo(".slick-dots");
$("<li class='previous'></li>").appendTo(".slick-dots");

我的 HTML 结果

<ul class="slick-dots" role="tablist" style="display: block;">
  <li class='next'></li>
  <li class="slick-active"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 5" tabindex="0" aria-selected="true">1</button></li>
  <li><button type="button" id="slick-slide-control01">2</button></li>
  <li><button type="button" id="slick-slide-control02">3</button></li>
  <li><button type="button" id="slick-slide-control03">4</button></li>
  <li><button type="button" id="slick-slide-control04">5</button></li>
  <li class='previous'></li>
</ul>

我想要的结果

<ul class="slick-dots" role="tablist" style="display: block;">
  <li><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Previous</button></li>
  <li class="slick-active"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 5" tabindex="0" aria-selected="true">1</button></li>
  <li><button type="button" id="slick-slide-control01">2</button></li>
  <li><button type="button" id="slick-slide-control02">3</button></li>
  <li><button type="button" id="slick-slide-control03">4</button></li>
  <li><button type="button" id="slick-slide-control04">5</button></li>
  <li><button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: block;">Next</button></li>
</ul>

Answer 1

我发现通过 slick，您可以使用自己的类名创建自己的 div。

HTML

<div class="slider-controls">
 <button type="button" class="slide-m-prev">prev</button>
 <div class="slide-m-dots"></div>
 <button type="button" class="slide-m-next">next</button>
</div>

然后你可以在 slick 函数中调用这些类。

JS

$(".slides").slick({
      dots: true,
      arrows: true,
      appendDots: $(".slide-m-dots"),
      prevArrow: $(".slide-m-prev"),
      nextArrow: $(".slide-m-next")
    });