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
samliew
(webflowexpert.com)
February 23, 2017, 10:11pm
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”.
samliew
(webflowexpert.com)
February 23, 2017, 10:17pm
3
MichealReno:
is this possible? (hosting the extra css files elsewhere) 2) how would you go about it?
Usually jQuery plugins are hosted on Github. Then this is what you need:
1a. Get embeddable link from any github resource.
Open file in a new tab
Click on “Raw”
[image]
1b. Change URL of raw file
Change URL from raw.github.com or raw.githubusercontent.com to cdn.rawgit.com
(VERY IMPORTANT OR SCRIPT WON’T WORK!!!)
Copy changed URL
Update: Rawgit replacement
See also:
How to host text files on Github
Also, feel free to contact me for further code help and/or customization of third-party plugins]
If they aren’t, download and then host them on Github:
MichealReno
(Micheal Reno)
February 23, 2017, 10:41pm
4
@samliew that’s exactly it! Does this code work on desktop too? (amazing site btw )
samliew
(webflowexpert.com)
February 23, 2017, 10:44pm
5
It could work on desktop, but that slider was only required on mobile, so it’s that way.
MichealReno
(Micheal Reno)
February 23, 2017, 10:50pm
6
How would you go about it to make it on desktop?
samliew
(webflowexpert.com)
February 23, 2017, 10:52pm
7
Exactly the same way it was done on mobile. See the linked project if you need guidance.
MichealReno
(Micheal Reno)
February 23, 2017, 10:54pm
8
@samliew Thank you so much!