Jquery 在滑动转盘上添加下一个上一个按钮

最近我增加了我的项目

在阅读这些文档时，我看到了一个方法

slick Prev（）

和

slick Next（）

但我想问你我该如何使用这种方法。我尝试了这么长时间，但实际上我不明白如何使用

html按钮

$('button.next').click(function() {
    $(this).slickPrev();
});

我试过这种方法

$('button.next').click(function(){
    $("#yourid").slickPrev();
});

尝试将
this
更改为
“#yourid”
，其中
yourid
是滑块的id


从版本1.4及更高版本开始，请使用：

$('button.next').click(function(){
    $("#yourid").slick('slickPrev');
});

如果slickPrev函数不起作用，您也可以这样做。您可以将函数名作为参数传递给slick

$('.next').click(function(){
    $("#sliderId").slick('slickNext');
});

我发现最好的方法就是这样。你可以删除我的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>'
});

$（'.home banner slider'）。光滑({
点：错，
无限：是的，
自动播放：对，
自动播放速度：3000，
速度:300,，
幻灯片滚动：1，
箭头：是的，
前箭头：“”，
下一行：“”
});

在脚本文件中初始化滑块并添加所需设置，如下所示：

$（“.my slider”）.slick({
箭头：是的，
前箭头：“”
});我的与上面的相同，但可能有点不同，我认为更好理解：

$('.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>

$（'.responsive'）.slick({
点：是的，
prevArrow:$（'.prev'），
下一行：$（'.next'），
无限：错，
速度:300,，
幻灯片放映：3，
幻灯片滚动：1，
自动播放：对，
自动播放速度：5000，
});
$（“选择器”）.slick({
下一行：'prev'，
如箭头所示：“下一步”
});

我添加了引导按钮，你也可以添加图像或图标

nextArrow-下一步允许您为“下一步”箭头选择节点或自定义HTML。
prevArrow-Previous允许您为“Previous”箭头选择节点或自定义HTML

您可以在未缩小的slick.js文件中的35;.defaults json对象下找到上面的nextArrow和prevArrow json属性。
快速说明：从1.4版开始，您需要使用
$（“#yourid”）.slick（'slickPrev'）取而代之。
    $("selector").slick({
        nextArrow: '<button type="button" class="btn btn-primary">prev</button>',
        prevArrow: '<button type="button" class="btn btn-primary">next</button>'
    });