在Slick Carousel上添加自定义按钮

Question

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

<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字符串(html | jQuery选择器)| object(DOM节点| jQuery对象)Previous允许您为"Previous"箭头选择节点或自定义HTML.

nextArrow string(html | jQuery selector)| object(DOM节点| jQuery对象)Next允许您为"Next"箭头选择节点或自定义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'>"
  });

Answer 2

来自文档

prevArrow/nextArrow

类型: string (html|jQuery selector) | object (DOM node|jQuery object)

一些示例代码

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

关于造型的一点注意事项

一旦Sl​​ick了解您的新按钮,您就可以根据自己的内容设计风格; 查看上面的示例,您可以根据class名称,id名称甚至是目标来定位它们element.

有人说JSFiddle吗？

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图标字体库.

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

Answer 5

当许多其他项目不起作用时，这对我有用：

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