Streaming live at 10am (PST)

Reproducing the template page carousel


#1

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: http://kenwheeler.github.io/slick/, 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?


#2

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".


#3

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

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


#4

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


#5

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


#6

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


#7

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


#8

@samliew Thank you so much!