Reproducing the template page carousel

There is a neat carousel on every page presenting a Webflow template (see here: https://webflow.com/templates/html/studies-education-website-template). It works well on mobile devices too.

Webflow is using Ken Wheeler’s code: slick - the last carousel you'll ever need, specifically in center mode.

I’d like to reproduce this effect inside a Webflow hosted site. 1) is this possible? (hosting the extra css files elsewhere) 2) how would you go about it?

1 Like

You already can do something similar with the Webflow slider + a little bit of extra custom code.

http://singapores-child.webflow.io (slider on homepage, in mobile only)

I believe the additional custom style needed is to make the non-active slide smaller:

.w-slide:not(.active) .roundup-item {
  transform: scale(0.9, 0.9) translate(0, -12px);
}

See project share link here. Click “Open in Webflow”.

Usually jQuery plugins are hosted on Github. Then this is what you need:

If they aren’t, download and then host them on Github:

@samliew that’s exactly it! Does this code work on desktop too? (amazing site btw :slight_smile: )

It could work on desktop, but that slider was only required on mobile, so it’s that way.

How would you go about it to make it on desktop?

Exactly the same way it was done on mobile. See the linked project if you need guidance.

@samliew Thank you so much!