Slick滑块：如何用SVG图标替换slick-dots默认切换圆点

问题描述 #

我需要将Slick滑块的默认切换圆点替换为SVG图标，已尝试在SCSS中为.slick-dots li button设置content属性引入SVG，但未生效；同时希望该SVG图标能随幻灯片切换进行样式调整。有人建议修改slick-theme.css，但修改库文件属于不良实践（虽Slick最后更新于2017年已停止维护）。

相关代码 #

Index.html

<div class="carousel">
    <div><img src="img/slide.png" alt="slider_1"><br><span>John Smith</span><br><p>Marketing Director at XYZ Corp</p></div>
    <div><img src="img/slide.png" alt="slider_2"><br><span>John Smith</span><br><p>Marketing Director at XYZ Corp</p></div>
    <div><img src="img/slide.png" alt="slider_3"><br><span>John Smith</span><br><p>Marketing Director at XYZ Corp</p></div>
    <div><img src="img/slide.png" alt="slider_3"><br><span>John Smith</span><br><p>Marketing Director at XYZ Corp</p></div>
    <div><img src="img/slide.png" alt="slider_3"><br><span>John Smith</span><br><p>Marketing Director at XYZ Corp</p></div>
</div>

SCSS（原代码）

// other code

.slick-dots{
    display: flex;
    justify-content: center;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 124px;
}
.slick-dots li button {
    content: url('../../icons/Vector.svg');
    font-size: 0;
    height: 14px;
    width: 14px;
    border: none;
    margin: 0 19px 0 19px;
}

index.js

const carousel = document.querySelector(".carousel");
const prevArrow = '<button type="button"  class="slick-prev"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 13.5C22.8284 13.5 23.5 12.8284 23.5 12C23.5 11.1716 22.8284 10.5 22 10.5L22 13.5ZM0.939341 10.9393C0.353554 11.5251 0.353554 12.4749 0.93934 13.0607L10.4853 22.6066C11.0711 23.1924 12.0208 23.1924 12.6066 22.6066C13.1924 22.0208 13.1924 21.0711 12.6066 20.4853L4.12132 12L12.6066 3.51472C13.1924 2.92893 13.1924 1.97918 12.6066 1.3934C12.0208 0.807611 11.0711 0.807611 10.4853 1.3934L0.939341 10.9393ZM22 10.5L2 10.5L2 13.5L22 13.5L22 10.5Z" fill=""/></svg></button>';
const nextArrow = '<button type="button"  class="slick-next"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5C1.17157 10.5 0.5 11.1716 0.5 12C0.5 12.8284 1.17157 13.5 2 13.5L2 10.5ZM23.0607 13.0607C23.6464 12.4749 23.6464 11.5251 23.0607 10.9393L13.5147 1.3934C12.9289 0.807613 11.9792 0.807613 11.3934 1.3934C10.8076 1.97919 10.8076 2.92893 11.3934 3.51472L19.8787 12L11.3934 20.4853C10.8076 21.0711 10.8076 22.0208 11.3934 22.6066C11.9792 23.1924 12.9289 23.1924 13.5147 22.6066L23.0607 13.0607ZM2 13.5L22 13.5L22 10.5L2 10.5L2 13.5Z" fill=""/></svg></button>';

const settings = {
    speed: 1000,
    infinite: false,
    dots: true,
    slidesToShow: 2.99,
    slidesToScroll: 1,
    centerMode: true,
    variableWidth: true,
    prevArrow: prevArrow,
    nextArrow: nextArrow,
    autoplay: true,
    autoplaySpeed: 2000,
    responsive: [
        {
            breakpoint: 767,
            settings: {
                slidesToShow: 1.99,
                dots: false
            }
        },
        {
            breakpoint: 575,
            settings: {
                slidesToShow: 1,
                dots: false
            }
        }
    ]
};

if (carousel) {
    $('.carousel').slick(settings)
}    

解决方案 #

核心问题分析 #

原代码失效的原因：

• content属性仅对**伪元素（:before/:after）**生效，直接给button元素设置不产生效果
• Slick默认给.slick-dots li button内部添加了数字文本，需要先隐藏

修改后的SCSS代码 #

// other code

.slick-dots{
    display: flex;
    justify-content: center;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 124px;
}
.slick-dots li {
    position: relative; /* 为伪元素定位做准备 */
}
.slick-dots li button {
    font-size: 0; /* 隐藏默认数字文本 */
    height: 14px;
    width: 14px;
    border: none;
    margin: 0 19px;
    background: transparent; /* 清除默认背景样式 */
    cursor: pointer;
}
// 用:before伪元素加载SVG图标
.slick-dots li button:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background-image: url('../../icons/Vector.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
// 激活态样式调整（当前幻灯片对应的圆点）
.slick-dots li.slick-active button:before {
    // 方案1：单色SVG用filter变色
    filter: invert(40%) sepia(90%) saturate(300%) hue-rotate(180deg);
    // 方案2：替换为激活态专属SVG
    // background-image: url('../../icons/Vector-active.svg');
}

关键说明 #

1. 伪元素承载SVG：通过:before伪元素加载SVG，解决content属性对普通元素无效的问题
2. 激活态控制：利用Slick自动给当前激活的圆点父元素添加的.slick-active类，实现切换时的样式变化
3. 样式优先级：确保自定义SCSS在slick-theme.css之后加载，或给选择器添加父容器类名（如.carousel .slick-dots li button:before）提升优先级，覆盖默认样式

内容的提问来源于stack exchange，提问作者Егор