在Slick Carousel上添加自定义按钮

Question

如何为Slick Carousel应用自定义上一页和下一页按钮？我尝试在.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>

非常感谢任何指引。

- rorykoehler

---

这是因为他们在按钮中使用了图标字体，你需要替换整个按钮代码。或者你可以去这里http://fontastic.me/创建自己的图标字体。 - mrpinkman

谢谢，那解决了问题。 - rorykoehler

我刚刚提供了一个更完整的答案，请将其标记为正确答案，以帮助改进Stack Overflow。 - mrpinkman

Answer 1

我知道这是一个旧问题，但也许我可以帮助一些人，因为在阅读文档之前，这也使我困惑了一段时间：

prevArrow字符串（html | jQuery选择器）|对象（DOM节点| jQuery对象）“上一页”允许您选择节点或自定义HTML，“上一页”箭头。

nextArrow字符串（html | jQuery选择器）|对象（DOM节点| jQuery对象）“下一页”允许您选择节点或自定义HTML，“下一页”箭头。

这是我如何更改我的按钮的方式... 完美地工作。

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

- tallgirltaadaa

---

你不需要为图像添加CSS类，Slick滑块将添加一个类来处理点击操作。 - nh-labs

我已经尝试过了，但它不起作用。实际上，我正在使用CDN链接的Slick，所以这可能是我无法使用自己的定制的原因。 - Siddharth Choudhary

Answer 2

从文档中得知

prevArrow/nextArrow

类型： 字符串 (html|jQuery 选择器) | 对象(DOM 节点|jQuery 对象)

一些示例代码

$(document).ready(function(){
    $('.slick-carousel-1').slick({
        // @type {string} html
        nextArrow: '<button class="any-class-name-you-want-next">Next</button>',
        prevArrow: '<button class="any-class-name-you-want-previous">Previous</button>'
    });

    $('.slick-carousel-2').slick({
        // @type {string} jQuery Selector
        nextArrow: '.next',
        prevArrow: '.previous'
    });

    $('.slick-carousel-3').slick({
        // @type {object} DOM node
        nextArrow: document.getElementById('slick-next'),
        prevArrow: document.getElementById('slick-previous')
    });

    $('.slick-carousel-4').slick({
        // @type {object} jQuery Object
        nextArrow: $('.example-4 .next'),
        prevArrow: $('.example-4 .previous')
    });
});

关于样式的一点说明

一旦Slick知道了你的新按钮，你可以根据自己的喜好对它们进行样式设计；从上面的例子中可以看出，你可以根据class名称、id名称或者甚至element来设置样式。

有人提到JSFiddle吗？

- Kenneth Stoddard

---

我们公司多年来一直在使用slick，但没有人知道我们可以将自己的按钮放置在DOM中。我们已经太长时间烦恼地使用position:absolute;和你的第一个示例了。谢谢你！ - Brandi Evans

Answer 3

如果你想使用任何图标字体库中的图标，可以在调用JS文件中的滑块选项中尝试此方法。

prevArrow: '<div class="class-to-style"><span class="fa fa-angle-left"></span><span class="sr-only">Prev</span></div>',

nextArrow: '<div class="class-to-style"><span class="fa fa-angle-right"></span><span class="sr-only">Next</span></div>'

"fa"来自FontAwesome图标字体库。

- Xuwel Khan

Answer 4

如果您正在使用Bootstrap 3，可以使用Glyphicons。

.slick-prev:before, .slick-next:before {
    font-family: "Glyphicons Halflings", "slick", sans-serif;
    font-size: 40px;
}

.slick-prev:before { content: "\e257"; }
.slick-next:before { content: "\e258"; }

- Yes Barry

---

对我有用，但由于字体大小的原因，我必须额外添加 .slick-prev, .slick-next { width: 40px; height: 40px; }。 - Alexandru Trandafir Catalin

Answer 5

在很多其他方法都没用的情况下，以下方法对我有用：

.slick-prev:before {
  content: url('your-arrow.png');
}
.slick-next:before {
  content: url('your-arrow.png');
}

- Buck3000

Answer 6

为什么不能使用默认CSS类并添加一些自定义样式？

.slick-next {
  /*my style*/
  background: url(my-image.png);
}

并且

.slick-prev {
  /*my style*/
  background: url(my-image.png);
}

你是否使用过简单的背景css属性？

例如： http://jsfiddle.net/BNvke/1/

你也可以使用Font Awesome。别忘了CSS伪元素。

还有，不要忘记jQuery，你可以替换元素、添加类等。

- Aivaras Čenkus

Answer 7

如果您使用sass，可以简单地设置下面提到的变量来使用其他字体提供的图标。

$slick-font-family:FontAwesome;
$slick-prev-character: "\f053";
$slick-next-character: "\f054";

这些将改变Slick主题CSS使用的字体系列，以及上一个和下一个按钮的Unicode。此示例将使用FontAwesome的chevron-left和chevron-right图标。

其他可以配置的Sass变量在Slick Github页面中给出。

- par

Answer 8

很容易。使用下面的代码，对我有效。我在这里使用了fontawesome图标，但您可以使用任何图片或其他图标的代码。

$(document).ready(function(){
    $('.slider').slick({
        autoplay:true,
        arrows: true,
        prevArrow:"<button type='button' class='slick-prev pull-left'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
        nextArrow:"<button type='button' class='slick-next pull-right'><i class='fa fa-angle-right' aria-hidden='true'></i></button>"
    });
});

- Chamon Roy

Answer 9

那是因为它们在按钮上使用了图标字体。正如您可以在此图像中看到的那样，它们使用了"Slick"字体：

基本上，将字母“A”制作成一个图标，将字母“B”制作成另一个图标，以此类推。

例如：

如果您想了解更多关于图标字体的信息，请点击这里。

如果您想更改图标，您需要替换整个按钮代码，或者您可以前往www.fontastic.me创建自己的图标字体。之后，将当前字体文件替换为自己的字体文件，即可拥有自己的图标。

- mrpinkman

Answer 10

$('.slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  speed: 500,
  dots: true,
  arrows: true,
  centerMode: false,
  focusOnSelect: false,
  autoplay: false,
  autoplaySpeed: 2000,
  slide: 'div',  
    nextArrow: '<button id="next">Next >',
        prevArrow: '<button id="previous">previous >',  
    
  
});

结果：

- Ved Prakash