Master Carousels in Framer (Slideshow, Ticker & Carousel)
Вставка
- Опубліковано 9 лип 2024
- Slideshows, Tickers and Carousels are some of Framer's flagship components. But how do they work? And when do we use them? In this video we cover all of it in 10 minutes!
📕 Show Notes 📕
➡️ Framer Remix Link: framer.com/projects/new?dupli...
➡️ Master Framer Playlist: • Crash Course: Master F...
➡️ Subscribe To The Channel: / @timgabe
Timecodes
0:00 Introduction and overview of the video content.
0:17 Explaining Framer's documentation about the Ticker component.
0:42 Practical demonstration of using the Ticker in Framer.
1:19 Customizing the Ticker component.
2:38 The different options within the Ticker component: fade, hover, and speed.
3:19 Overview of Carousel as per Framer's documentation.
3:54 Demonstration of using the Carousel in Framer.
4:18 Features and options of the Carousel component.
4:56 Further customization: snapping, fading, and progress indicator.
6:09 Carousel dots and arrows settings.
6:45 Accessibility options in Carousel.
7:43 Introduction to the Slideshow component.
7:50 Overview of Slideshow as per Framer's documentation.
8:16 Practical demonstration of using the Slideshow in Framer.
8:57 Customizing the Slideshow component and understanding the effects panel.
10:02 Overcoming clipping in Slideshow and further customization.
10:40 Exploring transitions and autoplay settings in Slideshow.
11:02 Recommendations for further learning in Framer.
➡️ QUESTION - Have a question about UI, UX or Product Design? Designing in Figma? Or Anything Else? Post in the comments section of this video-I’m happy to answer!
Perfect video at the perfect time again. thanks Tim👌
Just amazing, specially the slideshow animation, I will definitely try 🤩
Thank you. One of the most useful vids I've come across in my current stage of personal website development. It inspired some major decisions.
Used your guide and set up my first slide show in 15 minutes, You're awesome Tim💯
that's so cool to hear, Joshua!! happy I could help 😃
tim you made me love framer man, god bless you 👏
Hey Tim, love this tutorial, Framer is fun, can you make more Framer tutorials please 😀
Love Love Love more brother 😍😇 amazing tuts on framer learning a lot creative from you🥰
Nice explanation. Thank you, Tim!
appreciate you, frans!
This is soooo helpful!!!
wow! Thank you!
Lovely video, thank you so much!
Are you planning to make more Framer tutorials? Cause that would be awesome! Great tutorial as always!
I am following you from the time when you had 200 subscribers, and now when i see you, i am really happy for you.
wow, you've been here since the start! happy you're still around, friend!
im a big fan Tim . love ur tutorials sins the first one
Great video. Thank you!
Amazing! Such great UI UX
i love framer!
Love it. I'm more into the Framer tutorials than the Webflow ones. These are great.
Nicely done!
thanks a lot!!
All I can say is that you're awesome!
really appreciate that, thank you!!
THANK YOU SOOOOOOO MUCH I LOVE U
haha, happy to help cassie!!
Very valuable thank you! +1 sub
Fab thanks for putting this together - im new to framer and still discovering - in the slide show if you wanted text as well as an image would you put each set of image and text in its own frame to group them ? many thanks!
yes, i'd group them together!
Thank youuu! It only didn't work on the phone breakout point. I don't know why. But, for the rest, it helped a lot!
what happened on the phone breakpoint, my friend?
Very well presented and structured tutorial, thanks for this! By the way, are you from Sweden? Tyckte jag hörde liiite svensk brytning på engelskan :D
appreciate it, johan! 😃 haha, yes!! svensk!
What would be the approach if I want to control a carousel with custom arrow icons that are outside the carousel component? Example: I have 2 icons above the Caroussel that are part of another stack that I want to use to control the Caroussel.
Thanks for the great tutorial, Tim. Is there a way to connect your slideshow or carousel to a CMS?
yes, my friend! you can create components that you connect to the CMS and then add into your carousel/slideshow/ticker!
I'm about to find out if these images can be linked to an overlay. Thanks again, Tim!
happy to help, friend!!
Very nicely presented! Q: Is is possible to click/touch an individual slide to open a new window?
I have a small problem: when I add the contact section, I can't add extra elements to the form.
What if you wanna offset the animation, like each of them comes out at a different pace or speed. Or is that not possible
Hey! Thanks for your tutorial! I have a question: How can I create a carousel where a portion of the photo on the screen is hidden on the left, and I can swipe left and right? If I use 'position: absolute' and hide part of the photo to the left, I'm unable to scroll the carousel to the left, only to the right. Is this possible?"
with the current carousel component behaviour like that would be hacky to achieve, i'm afraid 😫
Yes bro please make 1 page landing which includes all the things like tabs, slider, stickers
I’ll jump in and try it, but it made me wonder if you can create a slideshow from the CMS items instead of the dragging UI
the way to do it with the CMS currently isn't suuuper straight forward, but i'll cover it a bit in my upcoming course!
Hey, in regards to ticker, why does its opacity reduced and restarts when I scroll and come back to the section? is there any way around this?
hmm... it shouldn't change opacity as you scroll by it. may be a bug.
how does it look when you publish the website? might be the editor bugging out!
Do you know how can I link a singular slide of the slideshow to a button in my page? For instance, I have 6 buttons for 6 services and 6 slides for each service. I'd like for my user to click on the button of a service and the slide changes to the info of that service.
Hi, Tim. I'm looking to use the Slideshow as a simple background with an image transition with a simple fade to the next image. Is this possible? Thanks!
hey paul!
i think that should be possible by creating just your own component... maybe something for a future video 😃
I have just one question please, when you have multiple Testimonials, what’s the best option to use?
hard one, really depends on the context! sorry for the lame answer 😖
the white dots needed to connect images doesn't show up for me
Hello there is it possible to swipe left and right on the ticker as well and if yes how?
tickers aren't swipable, but you can use the other carousels for that!
But how are you able to get this work work on multiple pages with different images
I have a problem when doing the slide show, the picts that i connected won't appear in review. what should I do
hard to say without seeing the file, unfortunately 😫
if i want to select one item from the slideshow to enlarge it ?
you can't really do it from the slideshow itself, you'll have to change the size of the items connected to it!
The slideshow transition between images looks choppy on mobile, no matter what kind of easing I set. Anything I can do to try and fix it?
is it choppy in both preview and on the live website? sometimes the preview will bug out!
@@TimGabe The preview looks fine, but when I view the live page on mobile it's choppy. Weirdly enough it's smooth in Firefox but choppy in Chrome and Opera.
Nice explanation, eager to try it out. But I'm getting an error "failed to insert" when i try to add a ticker, slideshow or carousel. Can you plz help?
never ran into that 🧐 i'd suggest you take a look at the framer community forum!
@@TimGabe thank you sir. I will check with them!
anyway to connect to a collection list?
here's a solution:
www.framer.community/c/support/how-to-connect-cms-content-to-a-carousel-slider
Can you add text at the bottom? Like a card
you can create a card component and put that inside your carousels instead!
why my ticker wont move ?, i visit every page and most people have the same problem as i do, but yet i havent seen any responses regarding our problems, is it the device or what ?
not sure Fransis! will have to look into this!
How do you resize the ticker for smaller breakpoints?
you'd have to just manually resize it on the canvas!
Thanks @@TimGabe! 🙏
Hi thanks for this! I'm having a problem on using Cards (with images, text, and button) on a slideshow being responsive in mobile. On mobile, they are either cut, or overlapping. Do you have any guide on this? Thanks in advance,
hard without seeing the thing, my friend! sorry!
@@TimGabe it's alright Tim! But can I suggest to make videos on carousel cards? As well as making them responsive. It would be a great help. Thank you!
@@ian5629 that’s actually a great idea! thank you 🙏
Great tutorial! For me Ticker isn't working, it only shows static images not moving. any solution to that?
that's weird, it should work out of the box!
@@TimGabe fixed it! My animation motion was disbled from settings.
hi tim, do you have any tutorial that explains events in framer? thanks
not specifically, but i'll be covering them in my upcoming course! 😃
Is it possible to have a Slideshow component with the thumbnail navigation below?
not natively, unfortunately!
you can create your own component to create an image picker, i did that for the website in my upcoming course!
Thanks@@TimGabe ! A tutorial video for that would be great in the future :) Good luck with your course.
You need a "donuts" tutorial, like Blender Guru. Find a tutorial that anyone can do and "present" it like a donut tutorial.
i like that idea, a lot. thanks man!
What if I want a thumbnail, and I want to click it so a full size image pops up. I mean TONS of artists have this kind of intention when they have a gallery. Especially because the images are different sizes and such.
Can you plz make a video on how to add a clickable call button with link and an appointment input form on framer.
This is great and all, but I don't see the point of having a slideshow that I can't click the thumbnails to see a larger image, the slideshow alone, while cool, is very limited, and therefore not as useful as it could be. Has anyone figured out how to include a click trigger to expand the size of the image from inside the slideshow?
if i understand correctly, i think this should be doable with overlays and some CMS magic! 😃
Hey can anybody help with this one query. I want to make a slideshow(each item is a frame having text image everything)
Second, I want to link it to some button on the same page. To move to specific section within carousel.
Purpose: feature slideshow with buttons to select specific feature. And show reflective slide
i think the golden ratio is a very good rule of thumb, for sure!
Does somebody know how to link tabs navigation with multiple carousels?
it would require custom code, i think!
But you can do this is Webflow very easily :( I am trying to achieve this through nested components. Let's see if it works.
@@kinoomalta if you don’t need the carousel component, then you can create your own version of it with nested components! i actually have a tutorial on it coming this week ☺️
@@TimGabe Yep, I did that before without using the carousel component but then I couldn't figure out how to swipe to the next item in mobile view like you do with the carousel left and right arrows that are built in.
I tried the tabs navigation with nested carousel and it's working great. :D But I am sure your tutorial would maybe make it more simpler than the mess I have made trying to set it up lol.
When come out course for Framer? 🤔
Very informative. But where’s my chocolate video? 🍫🥲
the chocolate video will be coming some day 🥰😘
Can you create tutorials of different animations you can create on header text?
oooh, that's a good one! text animations in Framer!
One Q, How can I get the code after I finish???
i have a problem. why my ticker not moving??
me too, did u figure it out now ?
@@25_fransissananta41 idk exactly what the problem is, but i try to visit my framer website from other devices, it's actualy moving. idk why, but from the other device it's working
we are here the first ones guys