在Slick Carousel上添加自定义按钮

问题描述

如何将自定义上一页和下一页按钮应用于光滑的旋转木马？我在 .slick-prev 和 .slick-next css类上尝试了背景图像。我也尝试根据文档添加一个新类，但箭头完全消失了：

How do I apply custom prev and next buttons to slick carousel? I have tried a background image on the .slick-prev and .slick-next css classes. I have also tried adding a new class as per the documentation but the arrows disappeared completely:

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

任何指针都会受到赞赏。

Any pointers would be appreciated.

推荐答案

我知道这是一个老问题，但也许我可以对某人有所帮助，但这也让我感到难过，直到我再阅读文档：

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:

nextArrow string（html | jQuery selector）| object（DOM节点| jQuery
object）Next允许
选择节点或自定义Next箭头的HTML。

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

这篇关于在Slick Carousel上添加自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！