are complex carousels possible?

Davidicus (David) shared this question 20 months ago
Answered

evaluating Justinmind currently. would be very helpful to be able to:

  • drag-scroll carousel items left and right
  • snap the centermost item to center, and highlight/focus it
  • move any tapped item on the carousel to center and focus it

possible?

Comments (8)

photo
1

Yes - check out the attached example. It's a little complex, but the main idea is that the rectangle will scroll into focus when it intersects with a hotspot.

photo
1

:) it's so complex, i can't figure it out or reproduce it. it looks like it might rely on swipes instead of dragging though. intuitively, i thought all the rectangles would have to be grouped to move as one. still perplexed.

photo
1

It's based on a horizontal scroll, and uses Swipe events to trigger the focus. You could try importing that prototype into the file you're working on (File -> Import -> Prototype), and implement or copy/paste the events and elements into your prototype.

photo
1

i'm trying to deconstruct the basic principles, but even the seemingly basic is confusing. in this example, no matter where i put the target hotspot, tapping the first rectangle scrolls off to the left. i'm clearly missing something basic, but to me, "Scroll To" with Horizontal restriction, should move the rectangle to the same X position as the target.

photo
2

To clarify, the Scroll To action moves the screen's scroll, not the position of an element on the screen. To move the rectangle itself, you should use a Move action.

photo
1

ok got it. thank you! honestly, ProtoPie is a comparatively smooth ride. you folks have strong competition.

photo
1

Hi

I really can not understand how the CenterDrag.vp file works. Would you please explain the events cause I can not reconstruct it.

Thanks

photo
1

The example works by detecting when you swipe left or right, and then will scroll the screen to a hotspot placed slightly to the right of each rectangle (so it will be centered). It will scroll to a different position by checking to see if a hotspot that is pinned to the center of the screen intersects with any of the rectangles, which move with the scroll. You can see all of the events by selecting the base screen in the outline palette.

photo