Insert Number to Gallery Slideshow Squarespace

Pro Tips Other Tips
1

To add Number to Gallery Slideshow in Squarespace, you can follow these steps.
#1. First, find Slideshow ID.

In my example, it is:

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

image
image800×215 33.7 KB

#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;
}}

image
image551×948 66.5 KB

#3. Result

image
image789×381 47.7 KB

#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;
}

image
image573×617 42.9 KB

Result:

image

#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;
}}

image
image527×973 67 KB

Result:

image