在 Slick Carousel 上添加自定义按钮答案

【问题标题】：Add custom buttons on Slick Carousel在 Slick Carousel 上添加自定义按钮
【发布时间】：2015-03-13 23:25:40
【问题描述】：

如何将自定义上一个和下一个按钮应用到光滑的轮播？我在.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>

任何指针将不胜感激。

【问题讨论】：

那是因为他们为按钮使用了图标字体，你需要替换整个按钮代码。或者你可以去这里fontastic.me创建你自己的图标字体
谢谢你成功了。
我刚刚做了一个更完整的anwser，将其标记为正确以帮助改进 Stack Overflow

标签： javascript css slick.js

【解决方案1】：

我知道这是一个老问题，但也许我可以对某人有所帮助，bc 这也难住了我，直到我更多地阅读文档：

prev箭头字符串 (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'>"
  });

【讨论】：

图片不需要css类，slick slider会添加一个类来处理点击动作
我试过这个，但它不起作用。实际上，我正在使用 slick by cdn 链接，所以这可能是我无法使用自己的自定义的原因

【解决方案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?

【讨论】：

我的公司多年来一直在使用 slick，但没有人知道我们可以在 dom 中放置自己的按钮。我们一直在烦人地使用 position:absolute;你的第一个例子太久了。谢谢你！

【解决方案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图标字体库。

【讨论】：

【解决方案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"; }

【讨论】：

为我工作但由于字体大小我不得不额外添加.slick-prev, .slick-next { width: 40px; height: 40px; }

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

为什么你不能使用默认的 CSS 类并添加一些你的样式？

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

和

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

你用过简单的background css属性吗？

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

您也可以使用 Font Awesome。不要忘记 CSS 伪元素。

别忘了jQuery，你可以替换元素，添加类等等。

【讨论】：

【解决方案7】：

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

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

这些将更改 slick 主题 css 使用的字体系列以及 prev 和 next 按钮的 unicode。此示例将使用 FontAwesome 的 chevron-left 和 chevron-right 图标。

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

【讨论】：

【解决方案8】：

这是因为他们为按钮使用了图标字体。正如您在这张图片中看到的，他们使用“Slick”字体：

基本上，使字母“A”成为图标的形式，字母“B”成为另一个图标的形式，依此类推。

例如：

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

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

【讨论】：

【解决方案9】：

这很容易。使用下面的代码，它对我有用。这里我使用了 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>"
    });
});

【讨论】：

【解决方案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 >',  
    
  
});

结果：

【讨论】：

【解决方案11】：

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

【讨论】：