How does the picture carousel realize the interactive effect of connecting the beginning and the end?

Ask the community
1


How does the picture carousel realize the interactive effect of connecting the beginning and the end?
e.g:Slide the first picture to the right to scroll to the last picture. Swipe the last picture to the left to scroll to the first picture.

2

This video doesn’t use interactive components.

1 Like
3

Hello, thank you for your reply. I don’t know if you have watched my video carefully. My operation is an interaction, it can not only loop forward, but also loop backward. This is a technique that I don’t know how to do.
It will be displayed like your video by default. You can also use gestures (swipe) to interact and switch the display content.

4

The principle of creating an infinite slider is exactly the same. Just use “On drag” trigger instead of “After delay”.

If you still don’t understand how to do this, then you can see my file:

1 Like
5

fantastic. Thank you. Learn from you

6

I made this last week, published it to the community, you’ll thank me later, hahaha, and make sure to leave a like :heart:

2 Likes
7

sorry for the late reply. Because I just saw your message. Thank you, your method is very good, I am learning. thanks again.

8

Hello everyone!

I’ve been bugged with this issue to create an endless image loop either vertically or horizontally but can’t think of a way around it. Below is a sample of what I want to achieve as this is for a client project pending prototype.

Thank you for your assistance! :pray:

1 Like
9

Thank you for your interactive component. I am very new at this and have spent the last 4 days trying to figure it out. I got this far and can’t figure out what to do next. I wanted foe the purpose of using it for a project, that you can see to the side. I don’t want the images touching but with a small space in-between. I also want only 3-4 images. I have not figured out where to make the change. I also can’t figure out how to get the item to go back to the beginning.

https://www.figma.com/file/Zo5NVLp7CpNMTszsKCT4X2/Infinite-Carousel-me?node-id=0%3A1

it’s a great help your file but would have been even better for us complete novices, with some written text of the process steps to create, ie what you did/created first , second and so on. Thanks

1 Like
10

Hi @Marlene_Horwitz, I’ve made a video explaining what you need to change:

https://vimeo.com/584699370

1 Like
11

Wow. Thank you so much. After I finish this course I am taking I want to really dive deeply into interactive components and variants.

One thing I see as a problem with variants is once you make the components into the variants you can’t go back to just the components. Therefore if you want to learn from an already created file it’s a lot of guessing what to change first. I really appreciate your video. :blush:

Another question I have. If I wanted to make the add and detail buttons work, link to those frames would they work? Or no because it’s like a component embedded in another component? Thanks

1 Like
12

@Marlene_Horwitz They will just work :slight_smile:, no additional configuration needed.

1 Like
13

Cool. :blush:

14

I learned a lot from the video. Here is what I did. I have a couple of questions. I thought that the ones that are blue in your file are the first and the last image. When you check my file it does not work as infinite because of the gray ones. What I want to know is 1)how to make it less images or more images, from which part do they get added or removed? Also what do I actually use (copy into) in my file. Thanks again s much.

https://www.figma.com/file/wKY3ugI3PX2p012EgSEgtp/Infinite-Carousel-mine?node-id=0%3A1

https://www.figma.com/file/BHrXl9UournLo7Bgksht2W/Valentinos-menu-app-WF-Updated?node-id=328%3A441

1 Like
15

To adjust the number of items displayed:
Find ◇ Infinite Carousel (under the How To Use section)
There you will see a property named: “# of items”

The first and last images are only there to give the infinite impression upon reaching either end of the deck, without them the user will hit the “wall” when scrolling past the end. Therefore, the first and last images are duplicates of your actual content, notice I have numbers originally marked on these cards to tell apart which one is which, follow the numbers and you’ll get the desired result :hugs:

Now, with regards to the inner implementation of such an interactive infinite carousel, I must say, they are super-advanced and may scare a lot of newcomers away, but if you press ⌘Y (ctrl Y on Windows) you will see that 95% of components used are hidden outside of the visible container, visually they are divided into 3 columns, these columns (from left to right) are for the 4 items (default), 3 items, and 5 items respectively. If you want to add for example 8 items, then you’ll need to add a column of components to the set.

Each ◆ component in the set contains an â«żâ«ż image-autolayout as well as a â«żâ«ż dot group.

Inside the â«żâ«ż image-autolayout is where you will find all the cards, increase the number of cards to n + 2 (because you’ll need two fake ones placed at either end) you’ll also need two drag actions for prototype connections on the â«żâ«ż image-autolayout layer: one connects to its preceding ◆ and one connects to its succeeding ◆, but there will be no drag action for the fake ◆s at the endpoints (I placed the two fake ones at the very bottom of each column), instead they have a 1ms delay and instantly swap itself to its real counterpart.

â«żâ«ż dot groups are pretty straightforward, the number of dots should always reflect the real number of items in the carousel (excluding the fake ◆s), and each ◇ sleek_dot has an on click prototype action that smart animates to the corresponding ◆, with ease out curve and 300ms duration

1 Like
16

Ok. Now it’s getting way above my understanding. :thinking: :flushed: You should really teach a course in this. Or someone should teach a course in variables and interactive components.

I will just add an additional image. Anyway for some reason the dots are not working can you tell me why and how to fix? Also to get the carousel to into my project, what do I need to do? Please be detailed. Thanks

https://www.figma.com/file/wKY3ugI3PX2p012EgSEgtp/Infinite-Carousel-mine?node-id=0%3A1

17

To use this on other projects you need to publish the file as a component library and then copy the “▷ Preview” Frame to your other project.

I checked your file, the dots were outside of the preview frame containing it. I dragged the frame to make it taller, all good :+1:

1 Like
18

Thanks. :kissing_heart::grin: You should really be teaching a course in this. I know there are videos but they don’t actually replace a course. Even a course of this infinite carousel, breaking it down from start to finish, each step. Udemy is a great platform to teach classes on.

I did manage to get it into my file however I can center the dots they are off center. How do I fix that? I understand if you move the bottom of the frame up or down it makes then closer or farther but I can’t center them.

https://www.figma.com/file/BHrXl9UournLo7Bgksht2W/Valentinos-menu-app-WF-Updated?node-id=328%3A442

19

One center constraint placed on “❖ banner_base” solved the issue, push an update and see the change take place

20

Hi tank666, I just came back to thank you! Your file was very helpful and was great to learn from, thank you.