更改滑动滑块箭头位置

Question

我想将光滑的滑动箭头的位置更改为图片中的相同位置，但是我无法在jquery中获得相同的位置。

$('.your-class').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true,
    prevArrow:'<i class=" fas fa-angle-right clr-gry"></i>',
    nextArrow:'<i class="fas fa-angle-left clr-gry"></i>'

});

Answer 1

在Slick函数上添加类，例如

prevArrow: $(".pp2"),
nextArrow: $(".nn2"),

＆下方按钮添加样式：

<button class="pp2">back</button>
<button class="nn2">forward</button>

Answer 2

您可以使用CSS更改箭头的位置。尝试如下

.clr-gry.slick-arrow {
    top: 0;
    position: absolute;
}
.fa-angle-left.clr-gry {
    right: 10px;
}

.fa-angle-right.clr-gry {
    right: 0;
}

如果这不起作用，请共享HTML页面。

Answer 3

.slick-next 和 .slick-prev 是光滑滑块中的预定义类。要自定义箭头的 CSS，您可以使用这些类来获得所需的结果。

无论您使用的是 jQuery 还是 React。