Skip to playerSkip to main content
Learn how to build an interactive accordion slider in Framer step by step. In this tutorial, you'll create a smooth, modern UI using variants and simple animations

πŸ”— Remix link: https://framer.link/YkaGNkq

✨ Create a Framer account: https://framer.link/khan-mohammad-imran

πŸ’– Support Us on Buy Me a Coffee: https://buymeacoffee.com/mohammadimran/e/322649

For more videos about Framer, be sure to subscribe and hit the like button if you found this helpful!

X: https://twitter.com/cyclotoco

Instagram: https://www.instagram.com/cyclotoofficial/
.
.
.
#framer #framerdesign #frameraccordion #framerslider #frameranimation
Transcript
00:00create this accordion slider in frame r no coding needed you will find the remix link in the
00:05description start by drawing a frame and adding your text then create another frame and turn it
00:13into a component inside it add an image a button and a badge duplicate this card reduce its width
00:20and remove the buttons text then create three more cards and update their content next create a new
00:27variant this time make the first image smaller and the second image larger repeat this process
00:34by creating three more variants each time increasing the width of a different image now
00:40update the background colors and connect the navigation select the second image drag the
00:45interaction icon and connect it set it to mouse enter do the same for the third image and repeat
00:52this for all the remaining images that's it your slider is ready for a full step-by-step
00:57walkthrough including responsiveness watch this full video
Comments

Recommended