I am currently using this official ‘Swiping slideshow’ tutorial to create a paginated slideshow controlled by gestures but the interaction is not accurate to real gestures.
This methods triggers a next panel state AFTER the gesture is complete but in reality a gesture should trigger the panel state change AS the gesture is happening. Ideally with the panel tracking the gesture along the X axis 1:1.
Does anyone have a better method to get this interaction?
Thanks!
You want the slideshow to work with the OnDrag event instead of the OnSwipeLeft/OnSwipeRight events, because OnDrag tracks the cursor movement. Axure doesn’t provide for “partial state changes” of dynamic panels, though. The dynamic panel (dp) is either in one state or another, with the provision of a (limited set of) animated transition of a set duration. If Axure allowed a function to define the duration of the transition this might be possible, but alas…
So, to make the “slide carousel” track with the dragging gesture, you’d need to take the content of each dp state and stack them side by side within a single dp state and group them. Uncheck the “Fit to Content” for the Swiping Slideshow" dp so it will act as a “mask area” or “viewport” for the slide carousel (your group of photos inside that dp.) Now the group of slides is “one element” which can be moved left or right inside the dynamic panel, only showing 300 px width (the width of the dp). The OnDrag event of the dp just moves the group with “drag x” so it will slide left/right only.
The trick is what to do when the drag is released (finger lifts), which triggers the OnDragDrop event. It should snap to the edge of the appropriate photo if dragged far enough. The variable, [[TotalDragX]] gives a value for how many pixels the cursor (or finger touch) moves during the drag, relative to the starting position. I chose a value of 1/4 the width of the photo to indicate “show the next photo”. In other words, the adjacent photo can “peek in” up to 25% before it becomes the “current photo”. (If you want to snap to the next/previous photo with less drag distance, change this to 1/5 or 1/10 or whatever.) To calculate which x-position to snap to, I used the first digit of the x-position of the group divided by the width of the dp then multiplied this by the width of the dp. This mathematical formula means it will work regardless of how many photos are in the slide set.
Here is an example of this approach, using a simple horizontal stack of images, and a version using a repeater. The repeater makes it easier and more efficient to add/remove more photos to your slide set. You just need to right-click on a cell in the “Photo” column and choose “Import Image…”.
Dragable Slideshow.rp (3.2 MB)
Thanks for this, it was exactly what I was looking for. Very neat implementation!
I am currently testing Axure 9 Beta btw and appears that it is not working. Not sure if it’s a bug or it will not be supported moving forward. Just thought you’d like to know.
It’s a bit of a shame it’s not supported out of the box seeings how prevalent it is on web and apps alike.
Thanks again!
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.