Insert Number to Gallery Slideshow

#1. First, find Slideshow ID.

In my example, it is:

section[data-section-id="66c9e58ed5bacd04f003ceec"]

#2. Use this code to Custom CSS box

section[data-section-id="66c9e58ed5bacd04f003ceec"] {
.gallery-fullscreen-slideshow-list {
    counter-reset: css-counter 0;
    list-style-type: none;
}
figure.gallery-fullscreen-slideshow-item {
    counter-increment: css-counter 1;
}
figure.gallery-fullscreen-slideshow-item::before {
    content: counter(css-counter) '. ';
    position: absolute;
    bottom: -40px;
    font-size: 20px;
    left: 20px;
    color: red;
}}

#3. Result

#4. If you want to add a total number after the current number, use this CSS code

section[data-section-id="66c9e58ed5bacd04f003ceec"] .gallery-fullscreen-slideshow-wrapper:after {
    content: "/12";
    font-size: 20px;
    margin-left: 40px;
    color: red;
}

Result:

#5. If you want to remove the dot symbol after the number, use this new code

section[data-section-id="66c9e58ed5bacd04f003ceec"] {
.gallery-fullscreen-slideshow-list {
    counter-reset: css-counter 0;
    list-style-type: none;
}
figure.gallery-fullscreen-slideshow-item {
    counter-increment: css-counter 1;
}
figure.gallery-fullscreen-slideshow-item::before {
    content: counter(css-counter);
    position: absolute;
    bottom: -40px;
    font-size: 20px;
    left: 20px;
    color: red;
}
.gallery-fullscreen-slideshow-wrapper:after {
    content: "/12";
    font-size: 20px;
    margin-left: 35px;
    color: red;
}}

Result: