Looking for suggestions re: keyframes & nth items

At a glance

The community member has been using global root and CSS variables in Webstudio to remove a lot of custom styles and classes. They have a CSS-only slider and want to find a better way to handle the nth-child items, as they would need to manually increment them if they add another slide. A community member suggests using the CSS attr() function, which would allow defining the animation delay once and having the specific value come from attributes on the element. The original community member acknowledges this suggestion has helped them progress, though they haven't fully implemented it yet.

Useful resources

JJeremy

With the global root and CSS vars coming to life in Webstudio, I've been able to remove a ton of custom styles and classes. I want to remove the following code block and am looking for better ways to handle the nth-child items, as I'd need to manually increment them if I add another.

(this is a CSS-only slider that I've made, so I'd like to avoid JS)

<style>
@keyframes scrollLeft {
to {
left: calc(-1 * var(--slide-width));
}
}

.logo-slider .slide:nth-child(1) {
animation-delay: calc(var(--slide-animation-duration) / var(--slide-count) * (0) * -1);
}
.logo-slider .slide:nth-child(2) {
animation-delay: calc(var(--slide-animation-duration) / var(--slide-count) * (1) * -1);
}
.logo-slider .slide:nth-child(3) {
animation-delay: calc(var(--slide-animation-duration) / var(--slide-count) * (2) * -1);
}
.logo-slider .slide:nth-child(4) {
animation-delay: calc(var(--slide-animation-duration) / var(--slide-count) * (3) * -1);
}
</style>

Attachment

2 comments

OOleg Isonen

I think you could use css attr() function https://developer.mozilla.org/en-US/docs/Web/CSS/attr

so this way you would only define it once and the specific value would come from attributes on the element

JJeremy

Ah, thank you. I haven't quite got it functioning as I want but this has got me far along.

Add a reply

Join the Webstudio community

Looking for suggestions re: keyframes & nth items