Question

最近我在我的项目中添加了Slick carousel。

阅读那里的文件我看到有一种方法slick Prev()和slick Next()。

但我问你如何使用这种方法。我已经尝试了很长时间，但实际上我无法理解如何在html button中使用它。

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

我试过这种方式。

Answer 1

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

尝试将this更改为"#yourid"，其中yourid是滑块的ID。

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

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

Answer 2

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

Answer 3

我的和上面的一样，但可能有些不同，我认为最好理解：

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

Answer 4

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

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

Answer 5

    $("selector").slick({
        nextArrow: '<button type="button" class="btn btn-primary">prev</button>',
        prevArrow: '<button type="button" class="btn btn-primary">next</button>'
    });

我添加了启动按钮，还可以添加图像或图标。

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

您可以在未缩小的slick.js文件内的_.defaults json对象下找到上述的nextArrow和prevArrow json属性。

Answer 6

在脚本文件中初始化滑块并添加您想要的设置：

＆＃13;

$('.my-slider').slick({
    arrows: true,
    prevArrow: '<div class="slick-prev"><</div>',
    nextArrow: '<div class="slick-next">></div>'
});

＆＃13;

设置类型slick-prev和slick-next

在光滑的旋转木马上添加下一个上一个按钮

6 个答案: