javascript - 在 Slick Carousel 上添加自定义按钮

Question

如何将自定义的上一个和下一个按钮应用于光滑的轮播？我已经在 .slick-prev 和 .slick-next CSS 类上尝试了背景图片。我也尝试根据文档添加一个新类，但箭头完全消失了:

<script type="text/javascript">
$('.big-image').slick({
  dots: false,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true,
  nextArrow: '.next_caro',
  prevArrow: '.previous_caro'
});
</script>

如有任何指点，我们将不胜感激。

Answer 1

我知道这是一个老问题，但也许我可以对某人有所帮助，因为这也难倒了我，直到我多读了一点文档:

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.

这就是我更改按钮的方式......效果很好。

  $('.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'>"
  });