Master Carousels in Framer (Slideshow, Ticker & Carousel)

Поделиться
HTML-код
  • Опубликовано: 8 янв 2025

Комментарии • 134

  • @AI-Chatbot-Hub
    @AI-Chatbot-Hub Месяц назад +1

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

  • @雪鷹魚英語培訓的領航
    @雪鷹魚英語培訓的領航 9 месяцев назад

    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.

  • @shubhiagrawal9885
    @shubhiagrawal9885 Год назад +1

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

  • @kishorekumarseenivasan
    @kishorekumarseenivasan 7 месяцев назад

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

  • @mengjoo0123
    @mengjoo0123 Год назад +3

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

  • @austinmoras7800
    @austinmoras7800 Год назад

    Perfect video at the perfect time again. thanks Tim👌

  • @thewebstylist
    @thewebstylist Год назад +1

    Amazing! Such great UI UX

  • @FransGamingLow
    @FransGamingLow Год назад +1

    Nice explanation. Thank you, Tim!

    • @TimGabe
      @TimGabe  Год назад

      appreciate you, frans!

  • @ram87463
    @ram87463 3 месяца назад

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

  • @llewellynvaneeden4467
    @llewellynvaneeden4467 10 месяцев назад

    Lovely video, thank you so much!

  • @peacechinonye5378
    @peacechinonye5378 Год назад +1

    All I can say is that you're awesome!

    • @TimGabe
      @TimGabe  Год назад

      really appreciate that, thank you!!

  • @shivudesign9210
    @shivudesign9210 Год назад

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

  • @osks
    @osks Год назад +1

    Nicely done!

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

  • @kualitydesign
    @kualitydesign Год назад +6

    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  Год назад +1

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

  • @oussamajaafar5287
    @oussamajaafar5287 Год назад

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

  • @harrycartwright466
    @harrycartwright466 2 дня назад

    There is surely way to add captions to carousels or slideshows, displaying additional text and descriptions of images when you click on an image for example?! Seems so basic but struggling to find any solutions, any help appreciated!

  • @cassiechen2874
    @cassiechen2874 Год назад +1

    THANK YOU SOOOOOOO MUCH I LOVE U

    • @TimGabe
      @TimGabe  Год назад

      haha, happy to help cassie!!

  • @jonathanh3843
    @jonathanh3843 4 месяца назад

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

  • @erwan6302
    @erwan6302 5 месяцев назад +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 ?

  • @jackieqiu7139
    @jackieqiu7139 Год назад

    This is soooo helpful!!!

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

  • @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 2 месяца назад

      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 :(

  • @nicokuhne9528
    @nicokuhne9528 11 месяцев назад

    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.

  • @svetlanashebika8127
    @svetlanashebika8127 Год назад

    wow! Thank you!

  • @fk1ip7
    @fk1ip7 Месяц назад

    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?

  • @Szynszula
    @Szynszula 24 дня назад

    what about shadows? I am struggling after importing from figma cards with beautiful shadows and carousel i cutting those... There is also no overfloe there

  • @nikagardey
    @nikagardey 11 месяцев назад +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  11 месяцев назад

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

  • @annanguyen8997
    @annanguyen8997 4 месяца назад

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

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

  • @KW-jd3de
    @KW-jd3de 5 месяцев назад

    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.

  • @ScottB-uw7zi
    @ScottB-uw7zi 5 месяцев назад

    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

  • @jakeingle8245
    @jakeingle8245 4 месяца назад

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

  • @jmcjane
    @jmcjane 6 месяцев назад

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

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

  • @KervensG
    @KervensG 7 месяцев назад

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

  • @mishazackandcody
    @mishazackandcody 11 месяцев назад +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  11 месяцев назад

      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!

  • @osks
    @osks 10 месяцев назад

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

  • @paulkelley5100
    @paulkelley5100 Год назад +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!

    • @TimGabe
      @TimGabe  Год назад

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

  • @eggpaint2087
    @eggpaint2087 2 месяца назад

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

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

  • @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 11 месяцев назад

    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.

  • @David.Belley
    @David.Belley 11 месяцев назад +1

    Can you add text at the bottom? Like a card

    • @TimGabe
      @TimGabe  11 месяцев назад

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

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

  • @bhupindersingh3990
    @bhupindersingh3990 8 месяцев назад

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

  • @yandeschenes
    @yandeschenes 6 месяцев назад

    Very valuable thank you! +1 sub

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

  • @dannydugandzic
    @dannydugandzic 7 месяцев назад

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

  • @selfsage10
    @selfsage10 3 месяца назад

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

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

  • @JohnSmith-s1v
    @JohnSmith-s1v 3 месяца назад

    How do you change the order of the children?

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

  • @pixel.viking
    @pixel.viking Год назад +1

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

    • @TimGabe
      @TimGabe  11 месяцев назад

      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 11 месяцев назад

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

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

  • @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  Год назад

      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!

  • @LorettaBangBang
    @LorettaBangBang 3 месяца назад

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

  • @Brandon453453
    @Brandon453453 7 месяцев назад

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

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

  • @adithnarein8420
    @adithnarein8420 Месяц назад

    how can I make the autoplay happen only on hover?

  • @fenixs7831
    @fenixs7831 10 месяцев назад

    When come out course for Framer? 🤔

  • @MohamedMarzok-y8z
    @MohamedMarzok-y8z Год назад +1

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

    • @TimGabe
      @TimGabe  11 месяцев назад

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

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

  • @osbert-o1r
    @osbert-o1r Год назад

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

    • @TimGabe
      @TimGabe  Год назад

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

  • @duranimusprime5989
    @duranimusprime5989 11 месяцев назад

    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.

  • @samourai4790
    @samourai4790 Год назад

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

  • @nickb987
    @nickb987 6 месяцев назад

    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?

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

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

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

  • @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 6 месяцев назад

    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!

  • @abeblue
    @abeblue Год назад +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  Год назад +1

      i like that idea, a lot. thanks man!

  • @anteater-c5m
    @anteater-c5m 5 месяцев назад

    thx bro

  • @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 3 месяца назад

    The ticket effect is not working

  • @oVISTASEK
    @oVISTASEK 5 месяцев назад

    Framer ninja

  • @Kluucy894
    @Kluucy894 Год назад

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

    • @TimGabe
      @TimGabe  Год назад

      the chocolate video will be coming some day 🥰😘

  • @anatoliepolisciuc
    @anatoliepolisciuc Год назад

    we are here the first ones guys

  • @shosh.digital
    @shosh.digital 6 месяцев назад

    Great video. Thank you!