Javascript 在 Slick Carousel 上添加自定义按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29043562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add custom buttons on Slick Carousel
提问by rorykoehler
How do I apply custom prev and next buttons to slick carousel? I have tried a background image on the .slick-prevand .slick-nextcss classes. I have also tried adding a new class as per the documentation but the arrows disappeared completely:
如何将自定义上一个和下一个按钮应用于光滑的轮播？我在.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>
Any pointers would be appreciated.
任何指针将不胜感激。
回答by tallgirltaadaa
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:
我知道这是一个老问题，但也许我可以对某人有所帮助，因为这也难倒了我，直到我多读了一些文档：
prevArrow string (html|jQuery selector) | object (DOM node|jQuery object) Previous Allows you to select a node or customize the HTML for the "Previous" arrow.
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.
prevArrow 字符串 (html|jQuery 选择器) | 对象（DOM 节点|jQuery 对象） Previous 允许您选择一个节点或为“Previous”箭头自定义 HTML。
nextArrow 字符串 (html|jQuery 选择器) | 对象（DOM 节点|jQuery 对象） Next 允许您为“下一步”箭头选择一个节点或自定义 HTML。
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'>"
});
回答by Kenneth Stoddard
prevArrow/nextArrow
Type:
string (html|jQuery selector) | object (DOM node|jQuery object)
上一个箭头/下一个箭头
类型：
string (html|jQuery selector) | object (DOM node|jQuery object)
Some example code
一些示例代码
$(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')
});
});
A little note on styling
关于造型的一点说明
Once Slick knows about your new buttons, you can style them to your heart's content; looking at the above example, you could target them based on classname, idname or even element.
一旦 Slick 了解您的新按钮，您就可以根据自己的喜好设计它们；查看上面的示例，您可以根据class名称、id名称甚至element.
回答by Xuwel Khan
if you want to use icons from any icon font library, you can try this in the option while calling the slider in your js file.
如果您想使用任何图标字体库中的图标，您可以在调用 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>'
Here "fa" comes from FontAwesome icon font library.
这里的“fa”来自 FontAwesome 图标字体库。
回答by Yes Barry
If you're using Bootstrap 3, you can use the Glyphicons.
如果您使用的是 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"; }
回答by Aivaras ?enkus
Why you cant use default CSS classes and add some your style?
为什么你不能使用默认的 CSS 类并添加一些你的样式？
.slick-next {
/*my style*/
background: url(my-image.png);
}
and
和
.slick-prev {
/*my style*/
background: url(my-image.png);
}
Are you used simple backgroundcss property?
您是否使用过简单的背景css 属性？
in example: http://jsfiddle.net/BNvke/1/
例如：http: //jsfiddle.net/BNvke/1/
You can use Font Awesometoo. Don't forget about CSS pseudo elements.
您也可以使用Font Awesome。不要忘记 CSS 伪元素。
And don't forget jQuery, you can replace elements, add classes, etc.
并且不要忘记 jQuery，你可以替换元素、添加类等。
回答by par
If you are using sass you can simply set below mentioned variables to use icons provided by other fonts,
如果您使用的是 sass，您可以简单地设置下面提到的变量以使用其他字体提供的图标，
$slick-font-family:FontAwesome;
$slick-prev-character: "\f053";
$slick-next-character: "\f054";
These will change the font family used by slick's theme css and also the unicode for prev and next button. This example will use FontAwesome's chevron-left and chevron-right icons.
这些将更改 slick 主题 css 使用的字体系列以及上一个和下一个按钮的 unicode。这个例子将使用 FontAwesome 的左雪佛龙和右雪佛龙图标。
Other sass variables which can be configured are given in Slick Github page
其他可以配置的 sass 变量在Slick Github 页面中给出
回答by Buck3000
This worked for me when a lot of these other items did not:
当许多其他项目没有时，这对我有用：
.slick-prev:before {
content: url('your-arrow.png');
}
.slick-next:before {
content: url('your-arrow.png');
}
回答by mrpinkman
That's because they use an icon fontfor the buttons. They use "Slick" font as you can see in this image:
那是因为他们为按钮使用了图标字体。正如您在此图像中看到的，他们使用“Slick”字体：
Basically, the make the letter "A" the form of an icon, the letter "B" the form of another one and so on.
基本上，使字母“A”成为图标的形式，字母“B”成为另一个图标的形式，依此类推。
For example:
例如：
If you want to know more about icon fonts click here
如果您想了解有关图标字体的更多信息，请单击此处
If you want to change the icons, you need to replace the whole button code or you can go to www.fontastic.meand create your own icon font. After that, replace the font file for the current one and you'll have your own icon.
如果要更改图标，则需要替换整个按钮代码，或者您可以访问www.fontastic.me并创建自己的图标字体。之后，替换当前字体文件的字体文件，您将拥有自己的图标。
回答by Chamon Roy
its very easy. Use the bellow code, Its works for me. Here I have used fontawesome icon but you can use anything as image or any other Icon's code.
它很容易。使用下面的代码，它对我有用。在这里，我使用了 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>"
});
});
回答by mhenry1384
A variation on the answer by @tallgirltaadaa , draw your own button in the shape of a caret:
@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");
then add the css
然后添加css
.slick-prev, .slick-next
height: 50px;s
}
