jQuery 在光滑的轮播上添加下一个上一个按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24107765/
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 next prev button on slick carousel
提问by Rasel mahmud
Recently I have added Slick carouselon my project.
最近我在我的项目中添加了Slick carousel。
Reading there document i have seen there is a method slick Prev()and slick Next().
阅读那里的文件，我看到了一种方法slick Prev()和slick Next().
But I am asking you how do I use this method. I have try this long time but I actually I can't understand how to use this with html button.
但我问你我如何使用这种方法。我已经尝试了很长时间，但实际上我无法理解如何将它与html button.
$('button.next').click(function() {
$(this).slickPrev();
});
I have tried this way.
我试过这种方法。
回答by Anima-t3d
$('button.next').click(function(){
$("#yourid").slickPrev();
});
Try changing thisto "#yourid"where the youridis the id of the slider.
尝试改变this，以"#yourid"其中yourid的滑块的ID。
As of version 1.4 and later, use:
从 1.4 版及更高版本开始，请使用：
$('button.next').click(function(){
$("#yourid").slick('slickPrev');
});
回答by Ilimkan Omurzakova
Mine is same as above but maybe a little different, and I think is better to understand:
我的和上面一样，但可能有点不同，我认为更好理解：
$('.responsive').slick({
dots: true,
prevArrow: $('.prev'),
nextArrow: $('.next'),
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
});
<div class="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</div>
<div class="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
回答by Delorme Grant
The Best way i Found to do that is this. You can remove my HTML and place yours there.
我发现做到这一点的最佳方式就是这样。你可以删除我的 HTML 并将你的放在那里。
$('.home-banner-slider').slick({
dots: false,
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
speed: 300,
slidesToScroll: 1,
arrows: true,
prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>'
});
回答by Sandeep Gupta
You can do the same if slickPrev function doesn't work. You can pass the function name as parameter to slick.
如果 slickPrev 功能不起作用，您也可以这样做。您可以将函数名称作为参数传递给 slick。
$('.next').click(function(){
$("#sliderId").slick('slickNext');
});
回答by Salike Hassan
$("selector").slick({
nextArrow: '<button type="button" class="btn btn-primary">prev</button>',
prevArrow: '<button type="button" class="btn btn-primary">next</button>'
});
I have added bootstrap button, you can add images or icons also.
我添加了引导按钮，您也可以添加图像或图标。
nextArrow- Next Allows you to select a node or customize the HTML for the "Next" arrow. prevArrow- Previous Allows you to select a node or customize the HTML for the "Previous" arrow.
nextArrow- Next 允许您选择一个节点或自定义“下一步”箭头的 HTML。 prevArrow- Previous 允许您选择一个节点或自定义“Previous”箭头的 HTML。
you can find the above nextArrow and prevArrow json properties under the _.defaults json object inside the un-minified slick.js file.
您可以在未缩小的 slick.js 文件中的 _.defaults json 对象下找到上述 nextArrow 和 prevArrow json 属性。
回答by Andre Nimczick
- Initialize your slider in your script file and add the Settings you want like this:
- 在脚本文件中初始化滑块并添加所需的设置，如下所示：
$('.my-slider').slick({
arrows: true,
prevArrow: '<div class="slick-prev"><</div>',
nextArrow: '<div class="slick-next">></div>'
});- Style the classes slick-prev and slick-next
- 设置 slick-prev 和 slick-next 类的样式
