Master Carousels in Framer (Slideshow, Ticker & Carousel)

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 ธ.ค. 2024

ความคิดเห็น • 132

  • @AI-Chatbot-Hub
    @AI-Chatbot-Hub 5 วันที่ผ่านมา +1

    Thank you Tim! This is exactly the kind of tutorial we were looking for

  • @雪鷹魚英語培訓的領航
    @雪鷹魚英語培訓的領航 8 หลายเดือนก่อน

    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.

  • @joshuacrownwell-omueti5602
    @joshuacrownwell-omueti5602 ปีที่แล้ว +5

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

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

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

  • @rohitbairagi5256
    @rohitbairagi5256 ปีที่แล้ว +1

    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  ปีที่แล้ว

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

  • @Ioannnify
    @Ioannnify ปีที่แล้ว +10

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

  • @chaya973
    @chaya973 ปีที่แล้ว +5

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

  • @kishorekumarseenivasan
    @kishorekumarseenivasan 6 หลายเดือนก่อน

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

  • @thewebstylist
    @thewebstylist ปีที่แล้ว +1

    Amazing! Such great UI UX

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      i love framer!

  • @shubhiagrawal9885
    @shubhiagrawal9885 ปีที่แล้ว +1

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

  • @mengjoo0123
    @mengjoo0123 ปีที่แล้ว +3

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

  • @FransGamingLow
    @FransGamingLow ปีที่แล้ว +1

    Nice explanation. Thank you, Tim!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      appreciate you, frans!

  • @peacechinonye5378
    @peacechinonye5378 ปีที่แล้ว +1

    All I can say is that you're awesome!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      really appreciate that, thank you!!

  • @ram87463
    @ram87463 หลายเดือนก่อน

    Thanks a ton for sharing this, you are awesome dude :)

  • @austinmoras7800
    @austinmoras7800 ปีที่แล้ว

    Perfect video at the perfect time again. thanks Tim👌

  • @osks
    @osks ปีที่แล้ว +1

    Nicely done!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thanks a lot!!

  • @llewellynvaneeden4467
    @llewellynvaneeden4467 9 หลายเดือนก่อน

    Lovely video, thank you so much!

  • @shivudesign9210
    @shivudesign9210 ปีที่แล้ว

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

  • @See_thru_it_all
    @See_thru_it_all ปีที่แล้ว +1

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

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      happy to help, friend!!

  • @oussamajaafar5287
    @oussamajaafar5287 ปีที่แล้ว

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

  • @cassiechen2874
    @cassiechen2874 ปีที่แล้ว +1

    THANK YOU SOOOOOOO MUCH I LOVE U

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      haha, happy to help cassie!!

  • @svetlanashebika8127
    @svetlanashebika8127 ปีที่แล้ว

    wow! Thank you!

  • @jonathanh3843
    @jonathanh3843 3 หลายเดือนก่อน

    Articulated in such an easy and friendly way. Very likeable person to watch, keep up this great content you get my subscription! :)
    Regarding the video, is there a way to make the carousel / presentation "pop out"?
    and also if I want to add a lot of photos and tag them to the carousel, is there a way to do it faster or must I manually drag and drop to each one? 😊

  • @johnleighdesigns
    @johnleighdesigns ปีที่แล้ว +2

    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  ปีที่แล้ว +1

      yes, i'd group them together!

  • @jackieqiu7139
    @jackieqiu7139 ปีที่แล้ว

    This is soooo helpful!!!

  • @erwan6302
    @erwan6302 4 หลายเดือนก่อน +1

    I've been trying to create something simlilar that to present a bunch of projects from a CMS, but you can't pull individual images from various projects of my CMS (i.e. the first image of each project). Have I missed something ?

  • @luizalouyoga
    @luizalouyoga ปีที่แล้ว +1

    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  ปีที่แล้ว

      what happened on the phone breakpoint, my friend?

    • @cassiebananas
      @cassiebananas หลายเดือนก่อน

      Yeah, same here. The overflow clipping shows for desktop but not tablet and phone. It only shows up while viewing the breakpoints on Framer, but on the actual devices itself, the faded images in the background does not show up :(

  • @osks
    @osks 9 หลายเดือนก่อน

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

  • @kualitydesign
    @kualitydesign ปีที่แล้ว +5

    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  ปีที่แล้ว

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

  • @katebekatuka3447
    @katebekatuka3447 ปีที่แล้ว +1

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

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

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

  • @KW-jd3de
    @KW-jd3de 3 หลายเดือนก่อน

    Hello, thanks for the great content. I have a question about the carousel. Is it possible to make the carousel items loop back to the first item after you reach the last item? Like I want the carousel to loop by clicking the arrows.

  • @johanholst3412
    @johanholst3412 ปีที่แล้ว

    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  ปีที่แล้ว

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

  • @oVISTASEK
    @oVISTASEK 4 หลายเดือนก่อน

    Framer ninja

  • @nikagardey
    @nikagardey 10 หลายเดือนก่อน +1

    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  10 หลายเดือนก่อน

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

  • @bhupindersingh3990
    @bhupindersingh3990 7 หลายเดือนก่อน

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

  • @nicokuhne9528
    @nicokuhne9528 10 หลายเดือนก่อน

    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.

  • @anteater-c5m
    @anteater-c5m 4 หลายเดือนก่อน

    thx bro

  • @fk1ip7
    @fk1ip7 2 วันที่ผ่านมา

    And how can I make it so that, for example, when changing a slide, the numeration changes:
    1/4, next: 2/4
    Or do I need to write a separate react component and connect it to this carousel?

  • @paulkelley5100
    @paulkelley5100 11 หลายเดือนก่อน +1

    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!

  • @jmcjane
    @jmcjane 4 หลายเดือนก่อน

    Does Framer support adding a title on top of each image? Thank you

  • @mishazackandcody
    @mishazackandcody 10 หลายเดือนก่อน +1

    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  10 หลายเดือนก่อน

      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!

  • @ScottB-uw7zi
    @ScottB-uw7zi 4 หลายเดือนก่อน

    How do you use different sized components in the slideshow? having trouble with the spacing after I've set everything to fit. Everything is still overlapping?
    heeeeelp please

  • @kynx_designs
    @kynx_designs ปีที่แล้ว +1

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

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

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

  • @yandeschenes
    @yandeschenes 5 หลายเดือนก่อน

    Very valuable thank you! +1 sub

  • @paulyliddell
    @paulyliddell ปีที่แล้ว +1

    How do you resize the ticker for smaller breakpoints?

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

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

    • @paulyliddell
      @paulyliddell ปีที่แล้ว

      Thanks @@TimGabe! 🙏

  • @bibespace
    @bibespace ปีที่แล้ว +1

    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  ปีที่แล้ว

      hard to say without seeing the file, unfortunately 😫

  • @ian5629
    @ian5629 ปีที่แล้ว +1

    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  ปีที่แล้ว

      hard without seeing the thing, my friend! sorry!

    • @ian5629
      @ian5629 ปีที่แล้ว

      @@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  ปีที่แล้ว +2

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

  • @jakeingle8245
    @jakeingle8245 3 หลายเดือนก่อน

    Hey man curious if you know how to put text and buttons on those slideshows

  • @FairyTouchbyBhashi
    @FairyTouchbyBhashi ปีที่แล้ว +1

    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  ปีที่แล้ว

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

    • @FairyTouchbyBhashi
      @FairyTouchbyBhashi ปีที่แล้ว

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

  • @abeblue
    @abeblue 11 หลายเดือนก่อน +1

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

    • @TimGabe
      @TimGabe  11 หลายเดือนก่อน +1

      i like that idea, a lot. thanks man!

  • @annanguyen8997
    @annanguyen8997 2 หลายเดือนก่อน

    How can I customize the arrow to have it in the upper right corner of the element?

  • @AgentStonee
    @AgentStonee ปีที่แล้ว +1

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

    • @TimGabe
      @TimGabe  ปีที่แล้ว

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

  • @alessandrosarfati9566
    @alessandrosarfati9566 9 หลายเดือนก่อน

    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.

  • @KervensG
    @KervensG 5 หลายเดือนก่อน

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

  • @undoriel
    @undoriel ปีที่แล้ว +1

    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  ปีที่แล้ว +1

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

    • @undoriel
      @undoriel ปีที่แล้ว

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

  • @dandenney3046
    @dandenney3046 ปีที่แล้ว +1

    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  11 หลายเดือนก่อน

      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!

  • @ShahadatHossain-yw3qi
    @ShahadatHossain-yw3qi ปีที่แล้ว +1

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

    • @TimGabe
      @TimGabe  ปีที่แล้ว

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

    • @ShahadatHossain-yw3qi
      @ShahadatHossain-yw3qi ปีที่แล้ว

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

  • @Brandon453453
    @Brandon453453 6 หลายเดือนก่อน

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

  • @fenixs7831
    @fenixs7831 9 หลายเดือนก่อน

    When come out course for Framer? 🤔

  • @25_fransissananta41
    @25_fransissananta41 ปีที่แล้ว +1

    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  ปีที่แล้ว

      not sure Fransis! will have to look into this!

  • @eggpaint2087
    @eggpaint2087 หลายเดือนก่อน

    when i put down carosouel it doesnt let me connect it to my images, how can i bring up the connectors?

  • @MohamedMarzok-y8z
    @MohamedMarzok-y8z 10 หลายเดือนก่อน +1

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

    • @TimGabe
      @TimGabe  10 หลายเดือนก่อน

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

  • @pixel.viking
    @pixel.viking 10 หลายเดือนก่อน +1

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

    • @TimGabe
      @TimGabe  10 หลายเดือนก่อน

      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 10 หลายเดือนก่อน

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

  • @selfsage10
    @selfsage10 2 หลายเดือนก่อน

    Hey the ticker effect is not working and not even in the previous projects I've created

  • @LorettaBangBang
    @LorettaBangBang หลายเดือนก่อน

    I found it different to put in square images that keep their 1:1 ratio responsively.

  • @osbert-o1r
    @osbert-o1r 11 หลายเดือนก่อน

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

  • @duranimusprime5989
    @duranimusprime5989 10 หลายเดือนก่อน

    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.

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

  • @chaya973
    @chaya973 ปีที่แล้ว +1

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

    • @TimGabe
      @TimGabe  ปีที่แล้ว

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

  • @thesneakypeeker1982
    @thesneakypeeker1982 10 หลายเดือนก่อน +1

    Can you add text at the bottom? Like a card

    • @TimGabe
      @TimGabe  10 หลายเดือนก่อน

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

  • @samourai4790
    @samourai4790 ปีที่แล้ว

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

  • @adithnarein8420
    @adithnarein8420 5 วันที่ผ่านมา

    how can I make the autoplay happen only on hover?

  • @moe-alhakeem
    @moe-alhakeem ปีที่แล้ว +1

    anyway to connect to a collection list?

    • @TimGabe
      @TimGabe  ปีที่แล้ว

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

  • @dannydugandzic
    @dannydugandzic 6 หลายเดือนก่อน

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

  • @nickb987
    @nickb987 4 หลายเดือนก่อน

    My screen width is about 1920px, and my pictures in the slideshow are proportionally as big as the slideshow width, but I don't want that. My slideshow pictures should be a maximum of 100px in width, not 1920px. How do I change that?

  • @JohnSmith-s1v
    @JohnSmith-s1v หลายเดือนก่อน

    How do you change the order of the children?

  • @Kluucy894
    @Kluucy894 ปีที่แล้ว

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

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      the chocolate video will be coming some day 🥰😘

  • @kinoomalta
    @kinoomalta ปีที่แล้ว +1

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

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      it would require custom code, i think!

    • @kinoomalta
      @kinoomalta ปีที่แล้ว

      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  ปีที่แล้ว

      @@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 ปีที่แล้ว

      @@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
    @mahamednasr9269 5 หลายเดือนก่อน

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

  • @yourtoken1732
    @yourtoken1732 ปีที่แล้ว

    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  ปีที่แล้ว

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

  • @anatoliepolisciuc
    @anatoliepolisciuc ปีที่แล้ว

    we are here the first ones guys

  • @vannth_
    @vannth_ ปีที่แล้ว

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

    • @25_fransissananta41
      @25_fransissananta41 ปีที่แล้ว

      me too, did u figure it out now ?

    • @vannth_
      @vannth_ ปีที่แล้ว

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

  • @selfsage10
    @selfsage10 2 หลายเดือนก่อน

    The ticket effect is not working

  • @shosh.digital
    @shosh.digital 4 หลายเดือนก่อน

    Great video. Thank you!