Issue with Custom Pagination Dots in Slick Slider Integration with Divi Elements in WordPress

Question

I am encountering an issue while attempting to customize the pagination of a Slick slider integrated with Divi elements within a WordPress environment. The objective is to implement custom pagination displaying in the format "< left arrow - slides count / current slide number - right arrow >" to enhance user navigation.

Despite my efforts, the custom pagination dots are not rendering as expected. Below is the code snippet I've been working with:

jQuery(document).ready(function($) {
    $('.our-team').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: true,
        prevArrow: '<span class="slick-prev"><span class="et-pb-icon">#</span></span>',
        nextArrow: '<span class="slick-next"><span class="et-pb-icon">$</span></span>',
        dots: true,
        customPaging: function(slider, i) {
            var totalSlides = slider.slideCount;
            return "<span class='custom-dots'>" + totalSlides + "/" + (i + 1) + "</span>";
        },
        appendDots: $('.pagination-container'),
        dotsClass: 'slick-dots custom-dots-container'
    });
});

any help to solve my problem