Can you post the file that you have so far? Or an edit link to it?

Much easier to advise if we see what you are working with.

Thanks KennLucas, my hero once again 💪

carousel w pagination.fig (150.8 KB)

I started to create Boolean properties to show/hide each frame, but keeping the order the same is a little bit of a headscratcher - as you can see if I’ve got prototype click connections, and want the one left and right of the frame in focus to have the title greyed out + 0% opacity on body text.

I haven’t tried applying Boolean to all 12 frames - across the 12 variables as thought it best to check if this was the right approach before doing so 🙂

Oooo! I did not even see that it was you!

Don’t hang a hero tag yet!

This one might take some reseach.

I tend to build a carousel on the page. Not as a huge component. You could run into some performance issues and a few other challenges like proper show/hide confusion with it in a giant component.

Oooo it works! I still think it could get unwieldy, but you did a great job here!

Like I said, I am not entirely sure how to do it this way. But I think I can set up the show/hide the way you want…

Thanks for your kind words!!

Took a bit of technical mental conceptualising but got there in the end but yes it is right on the edge unwieldy ATM 😂

The complicated aspect is that the order is:

11/12/1/2/3/4/5/6/7/8/9/10

As I want the whole thing to wrap around

The thing that made me hesitate from assigning Boolean hides for the cards not needed for use in say a 10 card carousel using the same component, is that if I do so, and desactive for example ‘card 12’ it pushes the card 1 to the left and out of the ‘focus’ spot. Due to the wrap around order above.

So I need a Boolean option to hide the card numbers not needed, while maintaining the flow of the carousel.

But, and although, I have numbered them all, the numerical order isn’t important so long as that as skipping from ‘page’ 1 to ‘page’ 2 order remains. As they won’t be numerical in the finished design, I did so just to design the component. Each of the numbers will be replaced with a title.

Yeah this logic is a little out there I think. Not entirely sure how to do this the way you are setting up your file.

Sorry I don’t have an immediate answer. But I will see if I can figure out more.

Not at all, thanks very much for your help as always KennLucas 🙂

How do you want the gray rectangle to appear when the card is unfocused?

Do you want that at 100% like normal or do you want some grayed out look?

Luckily the rectangles will have the same fill (of images) and I don’t plan to change their appearance at all when in or out of focus

How did you create your pagination component?

Is that just one row or do you have 12 states of dots?

I have a component with 12 variations

OK. Gotcha.

And you applied the interactions to EACH different instance on EACH of the component variants right?

I think I hurt my brain trying to do this without all the variants. 🤯

OK I THINK I have it…I just need some time to make it work. 🤞

Yes I did - I linked all of the dots on each of the 12 variations to every other page

Sorry purple.

This one is just not coming together.

I created an infinite carousel, but cannot hide the things you want to hide.

I also created a pretty good one that keeps things centered if you start turning off cards…but eventually you will end up with black space on the sides as the cards will run out. This is also an issue as they have to repeat to make it wrap and if you hide too many, you get duplicates.

So…sorry to have to let you down. But this one is not in my wheelhouse.

Why is the carousel pagination like that?

11/12/1 /2/3/4/5/6/7/8/9/10

is the way of navigation only the pagination or it also comes with arrows? If it’s just the pagination, i think it should be easier.

However sometimes I will need less, and so I’m wondering if I can use boolean properties to choose the number of slides in the component instance?

Yes. But that is weird. Normally, you wouldn’t use true/false on choosing the number of slides you wanted.

It would also be great to be able to choose/link the pagination dots so that the corresponding value of slides needed, also removes excess pagination dots.

It’s possible if were going to control the number of slides of your component.

I tried it, its quite buggy though there’s too many layers. Another issue is I can’t put the Card 12 on the left of the 1, i also don’t think that’s how pagination works. We can make infinite carousel without pagination though.

How are things working out? I love the work that @Raphael_M did in that video! Sexy! I came up with that same result but kept failing when trying to bring your cards to the start.

The only way to do that I know of is the infinite thing where you basically repeat the first two cards at the end and then string your interactions back to the start.

I agree that what you are asking is not quite how pagination works. That would be the real challenge. Sorry I can’t be more help. But please do post an update on what you end up doing!

Sorry for the delay guys - the last few days have been unexpectedly hectic.

Thank you once again Kenn 🙂 I really appreciate you trying!

I did think I must’ve made this using incorrect functions and methods so this makes sense as it was seemingly far more complex than it felt like it should be to achieve this.

I think this is the knowledge I’m missing as I realised half way through this that I just must be approaching incorrectly. Thank you for your suggestions and help and work Raphael.

Could you point me in the right direction in regards to rebuilding an infinite carousel correctly?

I found this tutorial to be pretty great.

I like his method and his tone in teaching. However I have had to watch a few parts over from time to time.

Although I still think the one @Raphael_M put together is smoother!