Hi guys,
Thanks as always to this fantastic community, had some invaluable advice before and it’s really appreciated!!
I’ve made a carousel, with pagination dots at the bottom and the biggest number of cards I need in it is 12.
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?
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.
I’m just in the process of building out the gallery in my website prototype using my first instance use of the component, and I’m trying to have to avoid making the same component 12 times:
with 1 slide
with 2 slides
with 3 slides
etc
Any suggestions would be great here, as I’m having a block as to how best to approach it 
Thank you
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.
1 Like
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!
1 Like
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…
1 Like
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.
1 Like
Not at all, thanks very much for your help as always KennLucas
1 Like
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
1 Like
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. 
1 Like
OK I THINK I have it…I just need some time to make it work. 
1 Like
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.
1 Like
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.
1 Like
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.
3 Likes