Reactjs Swiper React 用图像替换子弹

<Swiper
    modules={[Navigation, Pagination]}
    spaceBetween={10}
    slidesPerView={2}
    navigation
    pagination={{
        clickable: true,
        type: "custom",
        renderCustom: function(swiper, current, total) {
                                
        }
   }}
   ...

.swiper-pagination-bullet {
    background-image: url('../../../assets/images/slider-pagination.png') !important;
}

.swiper-pagination-bullet-active {
    background-image: url('../../../assets/images/slider-pagination-active.png') !important;
}

<Swiper
    modules={[Navigation, Pagination, FreeMode]}
    spaceBetween={10}
    slidesPerView={2}
    navigation
    pagination={{
        clickable: true,
        renderBullet: function(index, className) {
            return '<span class="' + className + '"><img class="pagination-bullet"/></span>';
        }
    }}
    ...

.swiper-pagination-bullet > img {
    content: url('../../../assets/images/slider-pagination.png');
}

.swiper-pagination-bullet-active > img {
    content: url('../../../assets/images/slider-pagination-active.png');
}

.pagination-bullet {
    width: 1.5rem;
    margin: 0 0.1rem;
}

Reactjs相关问答推荐

安装后未渲染tailwind

useTranslation不会在languageChanged上重新呈现组件

利用OVERPASS API端点计算某建筑的表面积

有没有办法让两个状态在两次精准渲染中更新？

REACTJS：在Reaction中根据路由路径更改加载器API URL

react 路由GUGUD Use Effect无法通过useNavigate正常工作

react -在选项中 Select 我想要显示和图像.但当我 Select 该选项时，我希望控件仅显示该选项的文本部分

ctx.strokeStyle 在 canvas html 5 中不起作用

获取类别和页面的参数

状态改变不会触发重新渲染

在 Next13 中将 props 传递给 onClick 从服务器到客户端组件

Mui Datepicker 设置了错误的日期

React对象值下降2次而不是1次

改变输入的默认值时出现问题：number react-hook-form

使用dayjs时如何在输入类型日期时间本地字段中设置默认值？

导航到屏幕时，react 本机上下文状态变为未定义

使用 yarn 编译 protobuf js 时出现错误pbjs： command not found

在视图列表上react 本机无限循环的反弹动画？

Axios 删除在带有授权令牌的react js 中不起作用

在 Redux 中更新布尔状态时出错