Streaming live at 10am (PST)

Tiny-slider 2: Full-width CMS slider with dynamic margins and transparent "unfocused" slides?

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: https://imgur.com/a/ExR5gYT
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. (https://github.com/ganlanyuan/tiny-slider)

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 :slight_smile:

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: https://tukan.webflow.io/tinyslider2