Discover the best slideshow websites created by professional designers. Get inspired and start planning your perfect slideshow web design today!

After seeing @Maximosaurus create a CMS slider in Webflow with no code, I decided to attempt taking it a few steps further using custom code. I'm not a developer so cobbled together the code best I could. Some cleanup might be needed!

It is dynamic, adding and removing slides automatically as Collection Items are added and removed. Styles can easily be updated in the editor without having to touch any code, with all item states shown in the CMS for easy editing (the code replaces them in the live version). The design includes arrows that respond based on first/last slide (in this case showing a different style when the ends are reached, or can set opacity to zero), and the nav bubbles function with the capability of including slide numbers. No looping or swipe support yet, but hope to add soon! 

Download the reference image on slide one for a breakdown of how to re-create this in a new document, and get the custom code on slide two.

Enjoy! I welcome feedback and improvements!

Custom CMS Slider

The slider component in Webflow can also be extended with an individual animation. This way you can give each slideshow its own character. 

This cloneable is a splitscreen gallery in which the slideshow automatically rotates through different collages and animates each slide with its own transition.

You could use a grid inside of each slide as well.

Watch the Tutorial here: 
https://youtu.be/IvxswB5jy-w

Custom Slider Autoplay Gallery Animation

Consolidated Signage is located in Clayton Victoria, and have been providing signage solutions Australia wide for over 40 years. We pride ourselves on creativity, personal service and attention to detail.

Consolidated Signage

consolidated Signage

Playing around with creating a fold out A5 card on the web. Using mouse movement and absolute positioning with a simple x-axis mouse movement interaction. All images can be found @jacob.robinson.

Fold out test

fold-out-test

A recreation of the WealthSimple Culture site following a request in the Facebook community. 

This is just first page, although the rest of the site follows a similar format. You'll notice some of the fonts and weights vary from the original. This is for educational purposes so people can understand how certain elements can be created. 

Original: 
https://www.wealthsimple.com/en-ca/culture/why/

You can check out the explainer video below for how some of the less common elements have been created. 

https://youtu.be/AB0sjVtkOp0

Wealthsimple

WealthSimple Culture Clone

Hi Webflow'ers.

Webflow dynamic countdown , easy to customize countdown date from webflow cms . 

Feel free to clone and let me know what you guys think about this development.

► Youtube : https://youtu.be/h14nLk31OCw

Anything you want to know ,  
► Contact : 
web : www.dishantd.com

► Social Media: 

Webflow: https://bit.ly/3Avd0Uc
LinkedIn : https://www.linkedin.com/in/dishan-td/

#webflow #cmsCountdown #animation #webflowinteractions #webdesign #countdown #landingPage #webdevelopment #webflowCountdown #dishantd #interactions

Countdown Landing Page

countdown-landing

CMS Dynamic Color Gallery in webflow  | Apple example layout

Video : https://youtu.be/67VDaHen9yc

Colors Gallery

CMS Dynamic Color Gallery

[ Tutorial ] 
https://www.youtube.com/watch?v=f1l25JX1vhI

Time for a new video! I asked on Twitter, and a lot of people seemed to have interest in a *basic* custom slider, with custom arrows, that's CMS powered, and easy to update for clients as well. 

So here it is, if you follow along the tutorial, you'll learn that creating custom sliders doesn't have to come with a headache!

Basic Swiper Tutorial

[ Cloneable ] basic CMS powered slider using SwiperJS

A twist on a tradition slider, cloneable website with the use of Z-index and mouse over animations.

Zara

zara-collection

Want to make a full-screen slider with fullpage.js?
Here I'm giving away a basic template you can use as the starting point for your website. 

Full tutorial on youtube:
https://www.youtube.com/watch?v=1KF1_5A7Mes

Written blog post:
https://alvarotrigo.com/blog/how-to-use-fullpage-in-webflow-create-full-screen-slider/

For a license you can get one here:
https://alvarotrigo.com/fullPage/pricing/

And use it in the licenseKey option in the fullpage.js initialization.

fullPage.js base

Fullpage.js basic example

After finding this beautiful slider from Muhammed Erdem on Codepen we wanted to replicate it natively in Webflow with 0 custom code.

This slider also includes an add to Wishlist button in the form of a lottie.

Feel free to clone this and customize it as you like. Can't wait to see this slider put in use.

Check out our work and case studies here: https://www.oraclestudios.io/

Smooth Split Slideshow Collection

Star Wars Imperial Army's Product Slider

Master Flowmaker

3D Slideshow Portfolio

Inspired by https://twitter.com/CLOUarchitects

098 - 100 days of @webflow interactions

#31 3D Slideshow Portfolio

#98 3D Slideshow Portfolio

CMS Menu Slider Cloneable: We built this CMS menu slider for food related items, but this slider can be used for just about any slider showcase! Slides are dynamic and are automatically created as collection items are added/removed. Adapted from a studio project.

Follow me for more cloneables in the future:

https://webflow.com/kaelabwilliams
www.btb-studio.com

CMS Menu Slider

Cloneable CMS Menu Slider

CMS Version: 
https://webflow.com/website/animated-fragment-slideshow

Let your clients manage the slideshow themselves

Original by 
https://lmgonzalves.com/writing

Dynamic Animated Fragment slideshow

Animated Fragment Slideshow (CMS Version)

Fullscreen Scrolling Slideshow [Codrops]

Fullscreen Scrolling Slideshow [CLONEABLE]

Here I'm giving away a basic example using fullPage.js to create horizontal fullscreen slides for your site.

Feel free to clone it and use as the starting point for your site!

You can get a fullpage license from here:
https://alvarotrigo.com/fullPage/pricing/

And use it in the `licenseKey` option in the fullpage.js initialization.

fullPage.js with horizontal slides

fullPage.js - Horizontal Slides

This is a Storytelling site experiment I did with the content of my actual recent client. The site includes a lot of scroll animations and interactive storytelling concept. I hope you enjoy this. cheers! 


PS: sorry I haven't made it cloneable : ( please ask your queries in the comments.

NSC - Full Page interactive Scroll animation

@palombokevin asked on his forum post (https://forum.webflow.com/t/full-page-navigation-h-v/70828) how he could replicate a slide based navigation.

Made it cloneable if someone wants to use it.