How to design Hero Sliders In Framer No Code!

New to framer? Try Now for free: https://framer.link/joseph25

Learn how to design Framer Hero Sliders for your clients or projects without writing any code. Easily change the content or slightly tweak the design to suit your vision and preference. For more check out herosliders here: https://heroslider.lemonsqueezy.com?aff=PDVnRv

Would you like a responsive version? Comment below and I will drop it.

Resource
Remix link: https://framer.link/mQhBwXT

Let's Connect today!
Subscribe on YouTube: @Framerdive
Email me: framerdive@gmail.com
Connect with me on X: https://x.com/FramerDive

0:00 - Introduction to Hero Sliders in Framer
0:53 - Overview of the current setup (navigation, main frame, wrapper)
1:29 - Getting started with the remix file
1:50 - Creating components: Main, Text, and Image
2:00 - Turning the main frame into a component
2:30 - Creating the text component and adding hover effects
4:30 - Setting up active and not active variants for text
6:47 - Duplicating text components and changing text dynamically
8:26 - Creating the image slider component with multiple variants
9:23 - Adding main variants for switching images and text
11:49 - Adjusting numerical indicators (01, 02, 03, 04)
13:30 - Designing the fill line animation
15:38 - Adding the loader inside the empty slider
17:07 - Setting up loop effect for the loader
19:01 - Duplicating loaders for other variants
21:08 - Connecting variants with "appear" triggers
22:20 - Adjusting image component transitions for instant switching
23:45 - Connecting text clicks to variant switching
24:50 - Conclusion and resources for Hero Sliders

Видео How to design Hero Sliders In Framer No Code! канала Framerdive