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

Was a little worried that I wasn't going to be able to achieve this effect; the left rail of photos moving with the slider, the text being yellow over the images... it all seemed impossible.

But, as I am constantly finding out, nothing is impossible in Webflow. Made purely with CSS, Interactions, and alot of messing about. Particularly proud of some of the smaller viewport accommodations.

Clone away, and let me know what you think in the comments, or if you're interested in knowing how I made this project come to life.

Strive, "Plaid Dress": https://dribbble.com/shots/6711696-Plaid-Dress

Allfather Hero Slider

Dynamic Hero Slider! - Dribbble Series ft. Strive

Multi-Step form using the slider component and some jQuery

step-form

Multi-Step Form (Slider + JS)

The first MicroMonday of 2022! And I know, I know—scrolljacking sucks... but here's an example using CSS only, no JS! You could remove the scroll-snapping if you wanted and still have native-only scroll transitions though, if you prefer.

✅ Native Interactions
✅ Custom CSS

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

Snapping 3D Slide Transition

MM—016: Snapping 3D Slide Transition

Stacking Slider

Overlapping CMS Slider

Sliding Tab Navigation With Custom Content Animations
WITH BACKGROUND & UNDERLINE
Info: If you need to add more tabs for your job, you also need to add another interaction for each tab accordingly, so that the background moves there.

Different Tab Navigation Animations

Various tab navigation and tab content animations

Here's a short 7 step tutorial on how to have a dynamic slider.

The amount of slides is determined by the amount of images added to the Multi-Image field in Collections. 

I hope this will accomplish the experience you were missing.

Feel free to ask me if you having trouble here:
https://forum.webflow.com/t/tutorial-create-a-dynamic-multi-image-slider/131059

Tutorial - Dynamic Slider - Multi Image

Tutorial - Dynamic Multi-Image Slider

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

Found this nice Slider

Original by 
https://lmgonzalves.com/writing

Animated Fragment slideshow

Animated Fragment Slideshow

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

Zara

zara-collection

Clone travel

Slide interactions travel

A full-screen parallax interaction that reveals different sections on scroll.  It also includes a subtle blurring effect. 

This works well for a slick portfolio section like https://www.dariaizbash.com, which fully inspired this effect!

Full Size Scroll

Fullscreen Parallax Interaction

Using PagePiling with Webflow is simple.

- Start by creating a DIV with ID 'pagepiling'
- Within the DIV create several sections with the class 'section'
- Make these sections height:100vh
- Add this code inside <head> tag
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.6/jquery.pagepiling.css" />

- Add this code before <body> tag
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.6/jquery.pagepiling.min.js"></script>
<script>
$(document).ready(function() {
	$('#pagepiling').pagepiling();
});
</script>

You can customize this more, eg with anchors, scrolling speeds and menu navigation by looking at the GitHub here https://github.com/alvarotrigo/pagePiling.js/

PagePiling with Webflow (FullPage JS free alternative)

PagePiling with Webflow (FullPage JS Free Alternative) Cloneable

A three-slide landing page featuring a five-column transition between slides.

Travel Blog Concept

Slide Transition - 5 Column Wipe

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

Custom slider transition with zoom in effect as the slide changes.

SketchzLab - Slider Custom Transition - 2

SketchzLab - Slider Custom Transition - 2 (Zoom In and Out)

Simple, no-code 'Slide under' section transitions

Sliding Sections

sliding-sections

This was my slides for a Webflow workshop 
that I gave at UX Society's UX&Chill 2020.

There aren't any notes inside.
I also made a Figma and Webflow template for a student portfolio that can be found in the slides.
It has some neat interactions that you might find cool.

Feel free to clone and enjoy!

UX&Chill: Webflow Workshop

Webflow Workshop: Website Portfolio Without Coding

This widget allows you to add advanced features to the native Webflow slider component, such as custom nav cursors, play/pause buttons or custom progress-bar for your slider.

To activate this widget you have to copy & paste the script in your Webflow project and follow few simple steps.

Discover slides websites built by the Webflow community

Discover slides websites built by the Webflow community