Hi all, I am looking for slider advice for our design team.
Here is my site Read-Only: LINK
We work on websites for a book publisher, and one of the most common components for these sites is a slider that shows multiple titles. All the books need to come in at the same height, and that can differ greatly, especially when incorporating novelty-size children’s titles (the Picture Books slider at the very bottom of the example page gives a good idea on how much width can vary).
Our current process is we build one carousel per break point, and then have to update the code for each breakpoint every time there’s a change. We place the amount of covers that fits on that slide (usually 5 for desktop, 4 for tablet, 3 for mobile horizontal, 2 for mobile vertical), so we have one slider with more/less slides for each breakpoint. And if the book is particularly wide, we need to compensate for that as well. It’s a tedious process, and makes for lengthy updates.
-art must be placed via HTML, we cannot use JPGs uploaded as assets.
-all art has a unique a link-out to a corresponding product page.
-we cannot use the CMS/Collection tools (we have multiple sites, and using CMS for each site is cost prohibitive).
-we need to keep any solutions as close to 100%-Webflow-native as possible — because we work with multiple designers at very different levels of coding experience (the majority of us are moving over from Adobe Muse, and some have zero experience or comfort with writing code), we aren’t able to implement something like Ken Wheeler’s Slick tool.
Does anyone have any suggestions on how we could streamline this process? Because we are specifying the height in the HTML embed, it’s not responsive to size changes in Webflow; when we’ve placed code at 100% and tried to use Webflow to constrain the size (in an effort to create a Class per breakpoint), that hasn’t been successful.
TIA for any advice and guidance!