Master Carousels in Framer (Slideshow, Ticker & Carousel)

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!

Пікірлер: 112

  • @joshuacrownwell-omueti5602
    @joshuacrownwell-omueti56029 ай бұрын

    Used your guide and set up my first slide show in 15 minutes, You're awesome Tim💯

  • @TimGabe

    @TimGabe

    9 ай бұрын

    that's so cool to hear, Joshua!! happy I could help 😃

  • @user-ik8vy1rg8f
    @user-ik8vy1rg8f3 ай бұрын

    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.

  • @austinmoras7800
    @austinmoras7800 Жыл бұрын

    Perfect video at the perfect time again. thanks Tim👌

  • @kishorekumar8216
    @kishorekumar8216Ай бұрын

    tim you made me love framer man, god bless you 👏

  • @shubhiagrawal9885
    @shubhiagrawal9885 Жыл бұрын

    Just amazing, specially the slideshow animation, I will definitely try 🤩

  • @Ioannnify
    @Ioannnify Жыл бұрын

    Hey Tim, love this tutorial, Framer is fun, can you make more Framer tutorials please 😀

  • @rohitbairagi5256
    @rohitbairagi52567 ай бұрын

    I am following you from the time when you had 200 subscribers, and now when i see you, i am really happy for you.

  • @TimGabe

    @TimGabe

    7 ай бұрын

    wow, you've been here since the start! happy you're still around, friend!

  • @chaya973
    @chaya973 Жыл бұрын

    Love it. I'm more into the Framer tutorials than the Webflow ones. These are great.

  • @FransGamingLow
    @FransGamingLow11 ай бұрын

    Nice explanation. Thank you, Tim!

  • @TimGabe

    @TimGabe

    8 ай бұрын

    appreciate you, frans!

  • @mengjoo0123
    @mengjoo0123 Жыл бұрын

    Are you planning to make more Framer tutorials? Cause that would be awesome! Great tutorial as always!

  • @svetlanashebika8127
    @svetlanashebika8127 Жыл бұрын

    wow! Thank you!

  • @shivudesign9210
    @shivudesign9210 Жыл бұрын

    Love Love Love more brother 😍😇 amazing tuts on framer learning a lot creative from you🥰

  • @jackieqiu7139
    @jackieqiu7139 Жыл бұрын

    This is soooo helpful!!!

  • @llewellynvaneeden4467
    @llewellynvaneeden44674 ай бұрын

    Lovely video, thank you so much!

  • @shosh.digital
    @shosh.digital11 сағат бұрын

    Great video. Thank you!

  • @thewebstylist
    @thewebstylist8 ай бұрын

    Amazing! Such great UI UX

  • @TimGabe

    @TimGabe

    8 ай бұрын

    i love framer!

  • @oussamajaafar5287
    @oussamajaafar5287 Жыл бұрын

    im a big fan Tim . love ur tutorials sins the first one

  • @osks
    @osks11 ай бұрын

    Nicely done!

  • @TimGabe

    @TimGabe

    11 ай бұрын

    thanks a lot!!

  • @peacechinonye5378
    @peacechinonye53788 ай бұрын

    All I can say is that you're awesome!

  • @TimGabe

    @TimGabe

    8 ай бұрын

    really appreciate that, thank you!!

  • @cassiechen2874
    @cassiechen28749 ай бұрын

    THANK YOU SOOOOOOO MUCH I LOVE U

  • @TimGabe

    @TimGabe

    9 ай бұрын

    haha, happy to help cassie!!

  • @yandeschenes
    @yandeschenes14 күн бұрын

    Very valuable thank you! +1 sub

  • @luizalouyoga
    @luizalouyoga10 ай бұрын

    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!

  • @TimGabe

    @TimGabe

    10 ай бұрын

    what happened on the phone breakpoint, my friend?

  • @johnleighdesigns
    @johnleighdesigns9 ай бұрын

    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!

  • @TimGabe

    @TimGabe

    9 ай бұрын

    yes, i'd group them together!

  • @B_Migs
    @B_Migs8 ай бұрын

    I'm about to find out if these images can be linked to an overlay. Thanks again, Tim!

  • @TimGabe

    @TimGabe

    8 ай бұрын

    happy to help, friend!!

  • @bhupindersingh3990
    @bhupindersingh39902 ай бұрын

    Yes bro please make 1 page landing which includes all the things like tabs, slider, stickers

  • @johanholst3412
    @johanholst34127 ай бұрын

    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

  • @TimGabe

    @TimGabe

    7 ай бұрын

    appreciate it, johan! 😃 haha, yes!! svensk!

  • @nicokuhne9528
    @nicokuhne95285 ай бұрын

    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.

  • @katebekatuka3447
    @katebekatuka344710 ай бұрын

    Thanks for the great tutorial, Tim. Is there a way to connect your slideshow or carousel to a CMS?

  • @TimGabe

    @TimGabe

    9 ай бұрын

    yes, my friend! you can create components that you connect to the CMS and then add into your carousel/slideshow/ticker!

  • @osks
    @osks4 ай бұрын

    Very nicely presented! Q: Is is possible to click/touch an individual slide to open a new window?

  • @NikaHardzei
    @NikaHardzei5 ай бұрын

    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?"

  • @TimGabe

    @TimGabe

    5 ай бұрын

    with the current carousel component behaviour like that would be hacky to achieve, i'm afraid 😫

  • @samourai4790
    @samourai4790 Жыл бұрын

    I have a small problem: when I add the contact section, I can't add extra elements to the form.

  • @dandenney3046
    @dandenney3046 Жыл бұрын

    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

  • @TimGabe

    @TimGabe

    6 ай бұрын

    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!

  • @shubhiagrawal9885
    @shubhiagrawal9885 Жыл бұрын

    Can you plz make a video on how to add a clickable call button with link and an appointment input form on framer.

  • @paulkelley5100
    @paulkelley51006 ай бұрын

    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!

  • @TimGabe

    @TimGabe

    6 ай бұрын

    hey paul! i think that should be possible by creating just your own component... maybe something for a future video 😃

  • @mishazackandcody
    @mishazackandcody5 ай бұрын

    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?

  • @TimGabe

    @TimGabe

    5 ай бұрын

    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!

  • @alessandrosarfati9566
    @alessandrosarfati95664 ай бұрын

    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.

  • @AgentBelovZ
    @AgentBelovZ10 ай бұрын

    Hello there is it possible to swipe left and right on the ticker as well and if yes how?

  • @TimGabe

    @TimGabe

    9 ай бұрын

    tickers aren't swipable, but you can use the other carousels for that!

  • @KervensG
    @KervensGАй бұрын

    What if you wanna offset the animation, like each of them comes out at a different pace or speed. Or is that not possible

  • @kynx_designs
    @kynx_designs9 ай бұрын

    I have just one question please, when you have multiple Testimonials, what’s the best option to use?

  • @TimGabe

    @TimGabe

    9 ай бұрын

    hard one, really depends on the context! sorry for the lame answer 😖

  • @bigdaddyproduction7266
    @bigdaddyproduction72666 ай бұрын

    You need a "donuts" tutorial, like Blender Guru. Find a tutorial that anyone can do and "present" it like a donut tutorial.

  • @TimGabe

    @TimGabe

    6 ай бұрын

    i like that idea, a lot. thanks man!

  • @bibespace
    @bibespace11 ай бұрын

    I have a problem when doing the slide show, the picts that i connected won't appear in review. what should I do

  • @TimGabe

    @TimGabe

    8 ай бұрын

    hard to say without seeing the file, unfortunately 😫

  • @ian5629
    @ian56299 ай бұрын

    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,

  • @TimGabe

    @TimGabe

    9 ай бұрын

    hard without seeing the thing, my friend! sorry!

  • @ian5629

    @ian5629

    9 ай бұрын

    @@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!

  • @TimGabe

    @TimGabe

    9 ай бұрын

    @@ian5629 that’s actually a great idea! thank you 🙏

  • @fenixs7831
    @fenixs78314 ай бұрын

    When come out course for Framer? 🤔

  • @paulyliddell
    @paulyliddell8 ай бұрын

    How do you resize the ticker for smaller breakpoints?

  • @TimGabe

    @TimGabe

    8 ай бұрын

    you'd have to just manually resize it on the canvas!

  • @paulyliddell

    @paulyliddell

    8 ай бұрын

    Thanks @@TimGabe! 🙏

  • @user-kt6eb5zc7x
    @user-kt6eb5zc7x5 ай бұрын

    if i want to select one item from the slideshow to enlarge it ?

  • @TimGabe

    @TimGabe

    5 ай бұрын

    you can't really do it from the slideshow itself, you'll have to change the size of the items connected to it!

  • @user-dq4ej5ys8q
    @user-dq4ej5ys8q6 ай бұрын

    hi tim, do you have any tutorial that explains events in framer? thanks

  • @TimGabe

    @TimGabe

    6 ай бұрын

    not specifically, but i'll be covering them in my upcoming course! 😃

  • @chaya973
    @chaya97311 ай бұрын

    Can you create tutorials of different animations you can create on header text?

  • @TimGabe

    @TimGabe

    11 ай бұрын

    oooh, that's a good one! text animations in Framer!

  • @kualitydesign
    @kualitydesign8 ай бұрын

    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?

  • @TimGabe

    @TimGabe

    8 ай бұрын

    if i understand correctly, i think this should be doable with overlays and some CMS magic! 😃

  • @FairyTouchbyBhashi
    @FairyTouchbyBhashi7 ай бұрын

    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?

  • @TimGabe

    @TimGabe

    7 ай бұрын

    never ran into that 🧐 i'd suggest you take a look at the framer community forum!

  • @FairyTouchbyBhashi

    @FairyTouchbyBhashi

    7 ай бұрын

    @@TimGabe thank you sir. I will check with them!

  • @thesneakypeeker1982
    @thesneakypeeker19825 ай бұрын

    Can you add text at the bottom? Like a card

  • @TimGabe

    @TimGabe

    5 ай бұрын

    you can create a card component and put that inside your carousels instead!

  • @ShahadatHossain-yw3qi
    @ShahadatHossain-yw3qi10 ай бұрын

    Great tutorial! For me Ticker isn't working, it only shows static images not moving. any solution to that?

  • @TimGabe

    @TimGabe

    10 ай бұрын

    that's weird, it should work out of the box!

  • @ShahadatHossain-yw3qi

    @ShahadatHossain-yw3qi

    10 ай бұрын

    @@TimGabe fixed it! My animation motion was disbled from settings.

  • @moe-alhakeem
    @moe-alhakeem Жыл бұрын

    anyway to connect to a collection list?

  • @TimGabe

    @TimGabe

    7 ай бұрын

    here's a solution: www.framer.community/c/support/how-to-connect-cms-content-to-a-carousel-slider

  • @Kluucy894
    @Kluucy894 Жыл бұрын

    Very informative. But where’s my chocolate video? 🍫🥲

  • @TimGabe

    @TimGabe

    7 ай бұрын

    the chocolate video will be coming some day 🥰😘

  • @25_fransissananta41
    @25_fransissananta4111 ай бұрын

    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 ?

  • @TimGabe

    @TimGabe

    11 ай бұрын

    not sure Fransis! will have to look into this!

  • @Brandon453453
    @Brandon453453Ай бұрын

    But how are you able to get this work work on multiple pages with different images

  • @undoriel
    @undoriel7 ай бұрын

    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?

  • @TimGabe

    @TimGabe

    7 ай бұрын

    is it choppy in both preview and on the live website? sometimes the preview will bug out!

  • @undoriel

    @undoriel

    7 ай бұрын

    @@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.

  • @pixel.viking
    @pixel.viking5 ай бұрын

    Is it possible to have a Slideshow component with the thumbnail navigation below?

  • @TimGabe

    @TimGabe

    5 ай бұрын

    not natively, unfortunately! you can create your own component to create an image picker, i did that for the website in my upcoming course!

  • @pixel.viking

    @pixel.viking

    5 ай бұрын

    Thanks@@TimGabe ! A tutorial video for that would be great in the future :) Good luck with your course.

  • @dannydugandzic
    @dannydugandzicАй бұрын

    the white dots needed to connect images doesn't show up for me

  • @yourtoken1732
    @yourtoken17328 ай бұрын

    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

  • @TimGabe

    @TimGabe

    8 ай бұрын

    i think the golden ratio is a very good rule of thumb, for sure!

  • @kinoomalta
    @kinoomalta8 ай бұрын

    Does somebody know how to link tabs navigation with multiple carousels?

  • @TimGabe

    @TimGabe

    8 ай бұрын

    it would require custom code, i think!

  • @kinoomalta

    @kinoomalta

    8 ай бұрын

    But you can do this is Webflow very easily :( I am trying to achieve this through nested components. Let's see if it works.

  • @TimGabe

    @TimGabe

    8 ай бұрын

    @@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 ☺️

  • @kinoomalta

    @kinoomalta

    8 ай бұрын

    @@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.

  • @mahamednasr9269
    @mahamednasr92697 күн бұрын

    One Q, How can I get the code after I finish???

  • @duranimusprime5989
    @duranimusprime59895 ай бұрын

    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.

  • @vannth_
    @vannth_ Жыл бұрын

    i have a problem. why my ticker not moving??

  • @25_fransissananta41

    @25_fransissananta41

    11 ай бұрын

    me too, did u figure it out now ?

  • @vannth_

    @vannth_

    11 ай бұрын

    @@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

  • @anatoliepolisciuc
    @anatoliepolisciuc Жыл бұрын

    we are here the first ones guys