Hi guys,
I’m trying to make a CMS slider and did find a few solutions here on the forum.
I want to achieve a full-width responsive slider and it should look like this on desktop: webflow and owl slider - Album on Imgur
What would be best practice to get something like the above?
For now I’ve decided on the “tiny slider 2” and I’m a little stuck. (GitHub - ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes.)
For the slide content I want around 60vw and a max-width of 1050px - seems fine for now.
Would there also be a way of using a dynamic margin like vw, cascading down to tablet etc.?
A hard pixel number doesn’t really fit with the expected behavior.
I managed to swap the nav-buttons to my desired custom ones (temporary design),
but I couldn’t find an option to vertically center the slides. So that the nav buttons and the slides are both centered vertically and horizontally.
When I stretch the viewport above a width of around 1700px the “only 2 items option” somehow breaks and it’s not centered anymore plus showing more than 3 items.
Also I want the cards that are not focused (the ones to the left and right from center) to be less opaque and animate on/off on click/scroll - let’s say 400ms easeInOutQuart.
How would you go about this?
Any tips are very welcome, thanks a lot!
I’ll try to make a little writeup when I finished the design 
Tiny-slider version : newest
Browser name && version : newest Chrome
OS name && version : WIN 10
Here is my site Read-Only: https://preview.webflow.com/preview/tukan?utm_medium=preview_link&utm_source=designer&utm_content=tukan&preview=ed0e1be4c08ae22ba253d4fc963ac159&pageId=5eec6fcb4d5311214b7de440&mode=preview
Here is the preview: Mod Edit: DEAD LINK → https://tukan.webflow.io/tinyslider2