What's an optimal way to build a card-flow like carousel?

I am need to prototype a card carousel with specific features which includes:

[ul]
[li]scroll left-right by 1 card
[/li][li]scroll left-right by a specific number of cards
[/li][li]displaying a number of cards available on each side
[/li][li]magnification of a card text/images on hover
[/li][li]more details in pict below
[/li][/ul]

Does anyone can recommend ways to build this?

Also Resize element OnMouseEnter resize images but not text, should this be combined with MouseOver or any other selector to set font size?

For anyone following along at home, LeoUX wrote in to our help desk with this question about building the card carousel. Something like this could get quite complex to build, but we were able to help simulate it by building off of a user’s scrolling carousel sample from the thread below:

https://www.axure.com/c/forum/mobile-prototyping/15543-swipe-carousel-multiple-items-visible.html#post50298

The above thread can help if you’re looking for ideas on how to move widgets by a certain distance. With regards to the other requirements of the carousel, we recommended the following:

  1. Use the “Rich Text” option of the “Set Text” action to change the font size when you resize your widgets. Alternatively, you can convert your text widgets to images and resize those, but this may cause pixelation.

  2. If you want to have a widget push and pull widgets next to it, then you will need to hide the widget with pull to the right, and then show it again with push to the right. This would necessitate that the widgets be converted to dynamic panels and then shown and hidden. You can change the size of the widget between the hide and show actions.

  3. To display how many widgets are “hidden”, you can try using global variables to keep track of how many times you have clicked to move widgets to the right or the left (an example is in the attached edited file). For example, if you have a “LeftCards” global variable that initiates at 0, you can increment that variable value by 1 each time you click the left button to scroll your cards one card to the left; this will make 1 card become hidden off on the side, and you can set the text on your widget to match the value of the global variable (1) to represent the hidden card. Here’s the article about global variables for reference:

https://www.axure.com/support/reference/variables

Hopefully this helps anyone who is looking to simulate part of this type of carousel!
scroll Edit.rp (64.9 KB)

1 Like

very helpful, and simple. thanks

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.