I want to crossfade several text quotes (coming from a CMS) having various lengths within a container div of a specific width. This is what I came up with, but it’s 2024 and I feel like there has to be an easier way to do this, either using only CSS or not having to resort to using onResize
. What I’m doing is looping through all the quotes twice: one for display and the other for size calculation – determining the “tallest” quote and setting the parent div to that height.
I don’t want to resort to importing a gallery/carousel library or js framework as a dependency for something that seems so simple. Just wondering if anyone has any ideas on simplifying this. Thanks!