My layout is pretty simple—showing citations in the middle and navigating between them. But it would be neat if the navigation is done without a browser refresh. This is important because I want to have music incorporated, and if there is a refresh, the music stops, but obviously, I don‘t want that.
Is there some sustainable workaround that is not too hacky?
Barba.js can help you but is a mess to setup since interactions easily break, what are you trying to do is having a Single page application, and Webflow is a tool instead for multi page websites
Why a mess to setup?
Webflow interactions need to be restarted properly on each page change
Not sure what that means? Anyway, seems like to be a hacky, and not sustainable solution, as I was hoping. 
So, I guess I‘ll create it in Webflow with refresh, and without the audio file, as a proof of concept. And if I achieve virality though social media share, I‘ll invest in paying a developer to do it properly.
If you have webflow interactions, and you change page, if you don’t restart properly the interaction system, all your interactions after first page change will be broken
Yeah, that‘s a bummer then. I will rely on lots of interaction to achieve a smooth experience, like transitions, animations, etc.
Then webflow is not the right platform for your audio player seamless transition, you will need to save the state after each page state and restart the audio from that, but you are not allowed by the browser to autoplay audios before a user interaction
If I’m understanding what you’re trying to do, why not use splide.js or slider.js, and just configure it to auto-switch without buttons? They’re very configurable in the transition effects, and in the swipe triggers.
Then you load it up from the CMS.
Limited to 100 items, but you can make them random ( re-randomizing every 12 hours ).
I‘m not up-to-date with the front-end world because I‘m a designer, but are you referring to splidejs.com? It doesn‘t seem to load a different URL per slide, or is it?
I can live without the audio, but separate URLs per quote are a must because they should be shared on social media. That‘s the whole point of the project—virality.
Yes, like this, right?
https://slider-auto-nav.webflow.io/recipe/assumenda-est
You have two different mechanism here, one is the ability to share a specific quote/slide by URL, the other is the ability is to present all the cards in a carousel with the URLs synchronized to each card.
The way to make them work together neatly in Webflow is to;
It was easier to show, so here’s the cloneable I built;
Code is on the collection page /body.
Oh, wow, so after all, it‘s possible in Webflow. And the only external script is that splidejs one, right?
I‘m not that dev-savy to fully understand what you said, but I‘ll give this to my friend developer to review it. Thanks a lot!
Yes, to both. Use my cloneable as your guide.
