更改光滑滑块箭头位置

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 函数上添加 Class，例如

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 已在 slick 滑块中预定义类。要自定义箭头的 CSS，您可以使用这些类来获得您想要的结果。

无论您使用的是 jQuery 还是 React，都适用。

更改光滑滑块箭头位置

Change Slick Slider Arrow Position

javascript

jquery

slider

slick.js