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字符串（html | jQuery选择器）|对象（DOM节点| jQuery   对象）上一篇   允许您为＆＃34;上一页＆＃34;选择一个节点或自定义HTML。   箭头。

nextArrow string（html | jQuery selector）|对象（DOM节点| jQuery   对象）下一个允许   您可以为＆＃34;下一步＆＃34;选择节点或自定义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

<强> From the docs

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

关于造型的一点注意事项

一旦Slick了解您的新按钮，您就可以根据自己的内容设计风格;查看上面的示例，您可以根据class名称，id名称甚至element来定位它们。

<强> Did somebody say 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

为什么你不能使用默认的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，你可以替换元素，添加类等。

Answer 6

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

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

这些将改变光滑主题css使用的字体系列，以及prev和next按钮的unicode。这个例子将使用FontAwesome的chevron-left和chevron-right图标。

可以配置的其他sass变量在Slick Github page

中给出

Answer 7

当很多其他项目没有时，这对我有用：

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

Answer 8

那是因为他们使用图标字体作为按钮。他们使用＆＃34; Slick＆＃34;您可以在此图片中看到字体：

enter image description here

基本上，写字母＆＃34; A＆＃34;图标的形式，字母＆＃34; B＆＃34;另一个的形式等等。

例如：

enter image description here

如果您想了解有关图标字体的更多信息 click here

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

Answer 9

非常容易。使用波纹管代码，它适用于我。这里我使用了fontawesome图标，但您可以使用任何图像或任何其他Icon代码。

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

Answer 10

@tallgirltaadaa对答案的一种变化，以插入符号的形状绘制你自己的按钮：

var a = $('.MyCarouselContainer').slick({
    prevArrow: '<canvas class="prevArrowCanvas a-left control-c prev slick-prev" width="15" height="50"></canvas>',
    nextArrow: '<canvas class="nextArrowCanvas a-right control-c next slick-next" width="15" height="50"></canvas>'
});

function drawNextPreviousArrows(strokeColor) {
    var c = $(".prevArrowCanvas")[0];
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.moveTo(15, 0);
    ctx.lineTo(0, 25);
    ctx.lineTo(15, 50);
    ctx.lineWidth = 2;
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
    var c = $(".nextArrowCanvas")[0];
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.moveTo(0, 0);
    ctx.lineTo(15, 25);
    ctx.lineTo(0, 50);
    ctx.lineWidth = 2;
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
}
drawNextPreviousArrows("#cccccc");

然后添加css

.slick-prev, .slick-next 
    height: 50px;s
}

Answer 11

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

结果：

在Slick Carousel上添加自定义按钮

11 个答案: