我的箭头图像周围有奇怪的边框，我该如何删除它？

Question

我正在为我们的团队轮播使用光滑的滑块。单击下一张幻灯片的箭头图像周围有一个奇怪的边框。

我已尝试删除所有 CSS 影响箭头图像、谷歌搜索、堆栈溢出等的内容。如何删除此边框？！

$('.team-slider').slick({
    prevArrow:"<img class='slick-prev' style='background url(./img/left.svg)'/>",
    nextArrow:"<img class='slick-next' style='background url(./img/right.svg)'/>",
    dots: true
});

http://hedge.cloud-2.co.uk（最后一页）

Answer 1

尝试使用另一个 HTML 标签，例如 span:

$('.team-slider').slick({
    prevArrow:"<span class='slick-prev' style='background url(./img/left.svg)'></span>",
    nextArrow:"<span class='slick-next' style='background url(./img/right.svg)'></span>",
    dots: true
});

或按钮：

$('.team-slider').slick({
    prevArrow:"<button class='slick-prev' style='background url(./img/left.svg)'></button>",
    nextArrow:"<button class='slick-next' style='background url(./img/right.svg)'></button>",
    dots: true
});

如果您使用按钮，则必须删除 CSS 中的轮廓：

.slick-prev,
.slick-next{
outline: none;
}

Answer 2

尝试将 .slick-slide { outline: none; } 添加到您的 CSS 它会成功的。

我的箭头图像周围有奇怪的边框，我该如何删除它？

Weird border around my arrow image, how can I remove it?

css

slick.js