Hey guys,
I’m building a project overview page with teasers based on a collection list from CMS. There is this wonderful feature to structure list items by odd items (1st, 3rd, 5th etc.) or event items (2nd, 4th, 6th etc.). This allows me to mirror the teaser content and switch the image and the text structure on every 2nd collection item.
But how can I structure children of these list items?
I found no solution in Webflow designer and it seams like :nth child is not supported either.
Would highly appreciate if anybody knows how to solve this problem.
Hey @Stan thanks for your help. I’ve implemented it and its reversing the slider_menue but there is no more “even structure”. So its reversing it for all the collection items. Could you check if I might did something wrong?
hi @Max_Bach do NOT add reverse in Webflow classes, ONLY in custom CSS, otherwise class will be applied to ALL elements. Sorry I didn’t mentioned it as I didn’t thing that is necessary, code I have provide add class reverse dynamically.
I have also noticed that you didn’t add DOMContentLoaded and JS code is wrapped in wrong tag correct tag for scripts is <script> </script> and no <style>, tag <style> is for CSS.
here is exact JS code
Hi @Stan, thank you for your help on this topic.
Yesterday I followed your guide to achieve the same thing on a website I’m working on and it worked perfectly.
Today, I don’t know why, the code snippet doesn’t seem to work anymore… I don’t know what has changed.
Could you take a look at my code and please tell me what I’m doing wrong?
My goal is to rotate in a different way the “.image-card-wrapper” elements and align on the left the “.heading-c3” elements on even collection items.
hi @joshua_dantonio with second loop you are re-assigning value of variable oddSliderNav in memory. You can simplify this process to use only one loop to catch both elements and assign them custom class. Something like this.
Hi @Stan thank you for your answer.
I tried to implement your code but there’s still something I’m missing.
In the console I get this error:
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at (indice):42:26
at Array.map (<anonymous>)
at HTMLDocument.<anonymous> ((index):38:22)
hi @joshua_dantonio I had now time to look on your project closer and your issue is related to your navigation. Reason is that your navigation have also generated elements .w-dyn-item but they do contain ONLY anchor <a>, that’s why you get an error as you are trying to grab element that doesn’t exist in this path.
You can solve it by pointing to .card-wrapper instead to grab only contents elements.
This code should work
@Stan, thanks so much for this, it works great. One question – how would I use the code you provided with multiple Collections on the same page? I only want to target the items in blocks_collection-list, and the code works when it’s the only Collection on the page, but as soon as I add two more collections above the code breaks. Thank you!
As this was a long time ago I do not remember the exact purpose but what I see in the code it seems to be for one collection. If there is more collection you need to grab all blocks_collection-list and loop over each one.
The issue may be only when you will have in one collection an odd number of items.