Creating a Parallax Slider in Webflow

A couple of days ago I came across this site: niarratravel.com. There's a lot of beautiful things about it, but I was really drawn to the parallax slider and promised myself to try recreating it in Webflow using just the slider component and interactions 2.0.
- CHAPTERS -
Chapter 01 | Starting the build 01:04
Chapter 02 | Developing the card 02:51
Chapter 03 | Developing the slider buttons 09:02
Chapter 04 | Animating the slider 10:48
- LINKS -
jocando-tutorials.webflow.io/...
preview.webflow.com/preview/j...
-- SKILLSHARE --
If you're a beginner or intermediate user, check out my Skillshare class: "Webflow for Beginners." Together, we create a simple one page portfolio website for a photographer, starting with the assumption you don't have any experience with HTML, CSS, or Webflow. Use the link below to get 2 months of Skillshare for free.
skl.sh/2PU9tML
All Tutorials:
jocando-tutorials.webflow.io/
- ABOUT ME -
Serve - My Creative Studio’s Site
www.madebyserve.com/
Dribbble
dribbble.com/Jose_Ocando
Twitter
/ jaocando
Instagram
/ jose.a.ocando

[@crooker2]

I'm actually amazed that in 2023, there STILL isn't a baked-in solution for image parallax effects in webflow.

[@malindalakshan7490]

Oh man, glad you're back. Plz keep uploading videos, they're really helpful.

[@jvvicr]

Awesome man I was trying to do this manually with swiper, and was difficult. This is even easier and nice.

[@miguelmao1593]

Thanks Jose! glad you're back!

[@elmedin26]

Under-under-under-underrated channel! Love your videos! 😁

[@nakeyshiaS]

Awesome! You were easy to follow along with and I love the speed you were going.

[@prism6]

Came here for the tutorial but you also helped me fix that 2:00 'hidden styles' issue with other sliders. Thanks!

[@harshadkumarpatel3341]

Amazing! I have applied the same pattern to my project and working perfectly fine. Thank you for sharing your idea and knowledge.

[@MartinAlejandro]

Man, you’re fast. Love watching you work.

[@kudz]

I was looking at that slider just last week! I’m going to love this video

[@wearestudiotonic]

Love your videos dude - thank you

[@paulperole]

I'm 2 mins into the vid and can already tell you're a good teacher. thanks for explaining your thought process as you go.

[@ericcyxng]

this video is incredible 😭you have such a knack for instructing. learned so much 🙏

[@aonnoysengupta]

my favourite youtuber is back!

[@tanishkmahajan]

YOUR VIDEOS ARE TOO GOOD MAN!!

[@bailey6759]

Thanks! I'll be using it today! YOU'RE THE BEST JOSE!

[@RocknRollCEO]

Welcome back, Jose!

[@Jochemms]

Absolute gold!

[@ALittleCrazy666]

Awesome and very helpful tutorial! Thank you!

[@jayreambonanza1991]

Okay. I'm now in the Webflow geek club. Cool stuff

[@jeremiahbanda7534]

loved it man, awesome

[@zoegatti857]

Thank you so much Jose! You're such a great instructor and this tutorial 100% worked for me. As someone new to Webflow, I have been struggling to find tutorials that I can easily follow, but your video was extremely straightforward and easy to follow and you do such a good job with explaining the how and why. Will continue to watch your tutorials and learn more from you!

[@claudeball9163]

Jose, I just found your content and you are a great great teacher! I like how you work efficiently. Great great!

[@federicamanguso7443]

Simple and effective! Good job !! 😉😉

[@webjoe4556]

GREAT JOB! LOVE IT

[@ldpuri]

Great walk through!

[@dasgood]

This was really good tutorial Jose ! Loads of tips and tricks there. Cheers

[@vanessavolk4111]

Thanks a lot for the tutorial. Love it

[@simonsjodin2104]

Love your stuff!

[@user-qj6wz9ei6t]

Great tutorial, man! Thanks

[@gabrielcoelho2686]

just amazing!

[@werewolf5]

Amazing work

[@mymusic1260]

Good Job Jose! Thank you so much!

[@juancarvalho]

Great Video, thanks for the tips, it'll gonna be really useful!

[@jacindagarcia]

Hi Jose, My name's Jacinda I started learning Webflow recently and the slideshow function has been difficult for me to manipulate but your tutorial is helping alot so far. Thank you!

[@akashchoudhary5736]

Very nice video, thanks for this :)

[@EmillianoRibeiro]

that was really helpful! thanks a lot

[@SebastianMorales-cy1li]

love this tutorial

[@Svetlana-hk3mm]

Thanks a lot! Your video was helpful.

[@user-sf1pq4ee2e]

Thanks a lot for your tutorial

[@nickblackmon842]

So good

[@layla-lz8pi]

thannk you so much you saved me

[@kellvix6715]

Great tutorial! I'll be applying some things here to a project of mine. Maybe the parallax effect would be more pronounced if the images were wider so it had more overflow material to animate.

[@the-secrettutorials]

I love this tutorial - I've learned so much from that example Btw. The slides keep scrolling until the last slider hits the left most point of the screen. Is there any way I can prevent that?

[@jessypage2172]

👏Thank you for the video! 🤔How to mix that with a dynamic collection natively?

[@mariusjurtz]

Great tutorial. I like your calm and natural presence in front of the camera. I think you could also recreate the effect by affecting the z-position of the image and by giving the outer section a children-perspective of 1000. I’m on my phone right now but I will test this tomorrow.

[@goldenant9450]

i dont understand perspective at all

[@CirdeceSk8er]

Great tutorial!! How would you make it so that when you navigate, it doesn't overflow to the section on the left, but still overflows past the edge of the viewport on the right?

[@empressdrelsie]

Thanks @JoseOcandoVideos. How do I remove the space at the end of the slides

[@LearningandSharing0]

Hi, really thanks for this tutorial. I'm using this in a project that i'm working on.. I just had one doubt... when I reach the end of the slider it snaps back to first, how do i make the slider stop at the last bit?

[@saddats999]

Increadible

[@arpitabanik6240]

Amazing!!If i want to bind this with cms collection for same structure how to do this??

[@realmassimomuntoni]

Great tutorial but I have some problems though, it's like the body width changes and adapts to the width of all the content inside the carousel, instead i would like to keep the width of the main screen and in responsive mode (320 px) while swiping the cards it switches the one in the middle so it jumps from the 2nd to 4th and viceversa, how can I fix these problems?

[@cordarro100]

Is there away to loop back to the first slide and also how would you make this responsive for mobile?

[@jvvicr]

One question how can I set up the end? so they can repeat again like a loop or something

[@hellalocal]

Could you move right and left on scroll?

[@thrrlya]

thanks a lot ur so adorable

[@reesgargi9978]

can you tell which javascript library can achieve?

[@zardiax]

how do you activate this web flow "find anything" search bar?

[@NightBlade58]

is there a way to clone this project?

[@marcellawinograd376]

Hi! New to webflow. Is there a way to make one of the slide wider? For example a landscape photo?

[@shaheerrahman87]

You could add a combo class to that particular slide and change its width.

[@dkncd]

Thanks so much for the tutorial! The slider shows an empty slide at the end. At 13:24, right when you slide at the end it's like the slider is reading another slide that isn't there. How do I get rid of that?

[@FatherMuldoon]

I'm heaving the same issue, did you happen to find a solution?

[@dkncd]

@@FatherMuldoon Sort of. I just set the section to overflow auto, so that way I can just use the pad on my mac laptop top scroll right. It's not the best solution though because it's not very effective for pc users with a mouse to scroll.

[@FatherMuldoon]

@@dkncd Thanks for your reply, I decided to use a different method as I needed my sliders content to be dynamic. I used refokus slider generator which you can use directly on the collection list and create a slider of it. Works great!

[@lamouralice4533]

7:20 Parallax movement setting 9:34 Slider Buttons

[@emiolaodunayo440]

Can these sliders be link with cms

[@iamtommyok]

missed your videos

[@hagaitsidon3958]

And what about mobile? How can the issue be fixed?

[@joelm1988]

Love everything about this... except whatever that background noise is 😆

[@caiolopes4680]

man you crazy hahaha

[@mranye]

All I hear is Chat Nigga Based...Lool I love your tutorials, such huge time savers

[@downtowndesign]

Can't see any parallax in this animation, though. It's just a simple slider animation Is this clickbait?.

[@josmito]

Go to fast :(