Swiping Slides with dots indicator

#1

Hi,

I have a swiping slide show as an overlay. There’re some blue dots below each slide to indicate which slide they’re on. White dot means the current slide, blue ones are the other slides. As the user swipe left and right the white dots will switch location accordingly.

The way I built is to have all 3 slides laid out in a dynamic panel. Using swipe as action to tell that DP to move left and right by X pixels. The 3 dots are in a separate DP. There’re 3 states in the DP. One for each white dot location. Now when the slides move left and right, I have a hotspot in the middle of the screen to check which slide is currently overlapping with this hotspot. If it detects the 1st slide over the hotspot, I will set the state of the dots DP to “slide 1”. So the white dot appears on the 1st place. Same with the second and third slide. It checks which slide overlaps with the hotspot.

However, it doesn’t work. The dots DP doesn’t switch states to match to the slide currently being displayed. What did I do wrong? I can share RP file if needed.

Thanks.

KB

49%20PM
Screen Shot 2021-01-05 at 4.00.49 PM.png430×797 44.4 KB
55%20PM
Screen Shot 2021-01-05 at 4.01.55 PM.png1353×394 55.2 KB
27%20PM

#2

You don’t have to use the hotspot. With your current setup you can just refer to the current state of the “slides” dynamic panel. There are several ways you could reliably get the state of the dots DP to match the slides DP.

  • I recommend identical names for the states of both DPs --based on your screenshots, name the three states of the slides DP to Slide1, Slide2, Slide3. Then use the Panel State Changed event of the slides DP to change the state of the dots DP to match it. Something like,

Panel State Changed
Set Panel State of ++BottomDots to state of This

  • If the names of the states are different between the two DPs for some reason,

  • You could also just cut & paste the dot widgets into each associated state of the slides DP. Should be no reason to have them separate.

#3

Hi,

Thanks for the reply. :slightly_smiling_face:

I have all 3 slides(3 small DPs) inside of a large DP container. That’s how I tell Axure to move the large DP container, the whole thing from left and right. When I tried to do the following on each of the small DP(individual slides):

Panel State Changed
Set Panel State of ++BottomDots to state of This

It still doesn’t change the dots. If I include the dots in the large DP container, the dots will move left and right with the main DP slide container. That’s not what I want. The dots need to stay at the same location, only “highlight” the corresponding slide shown.

I attached 3 screen shots. One shows the Events/Actions I assigned to the main slide container(move left and right). The other 2 shows what I assigned to the individual slide inside of the large container. The Event/Actions is the same as above. I also tried to target Set Panel State of to the state name of the bottom dots(slide 1/2/3). It didn’t work.

31%20AM
Screen Shot 2021-01-07 at 9.23.31 AM.png1758×533 93.2 KB

00%20AM
Screen Shot 2021-01-07 at 9.27.00 AM.png1763×526 85 KB

22%20AM
Screen Shot 2021-01-07 at 9.23.22 AM.png1759×509 83.7 KB

#4

So you have only one state for your “slides” DP? I don’t think I quite understand your setup… maybe you could post your .rp file?

Here’s the simplest way I know of to set this up… 1 state per slide, same corresponding number of and names for states in the dots DP. In my previous post I forgot that you can’t directly refer to the current state of a DP (you can’t “get” this property of a DP) but you can set a global variable (or text of a widget) to the current state, and then refer to that. Take a look at this quick demo:
dp slides with dots.rp (79.1 KB)

#5

I see what you’re doing. Using variable to swap DP names, smart:+1:. Your solution is far more simpler than mine. It totally makes sense. 3 separated states for each slide. I knew there’s other(better) way to do this. Somehow I took a more complicated path, sigh:roll_eyes: This is one of my newbie challenges. Axure can do the same thing so many ways, how to identify the quickest and simplest way to build something. I tend to over think my solutions…:sweat:

#6

So after comparing my method with yours. I see why I was doing the “hard way”. Its the opening “bouce” animation I wanted to do. So when the slide show is loaded at the beginning, I wanted all slides move across the screen to show “there’s more slides if you swipe”, a visual hint for user to explore more content. Then it will settle down on the first slide with a bounce. In order to achieve this, my original idea was to have all slides in one state and one DP container. Now I think about this I could have achieve both with two setups. 1. Use a dummy opening motion(DP), have it animate across the screen. 2. then wait a second or two to let it settle, then hide it, and show the hidden DP behind of it(the DP method you created). So essentially swapping slide DP after the opening motion.

Attached my RP file. It shows the opening animation. Click the lower left FAB, then the “i” info icon. I’ll experiment with the two step setup now. I think this should have both things I want.

Thanks!demo_test_slides.rp (2.2 MB)

Update: reporting back. Bingo, the two step approach worked! Run a dummy lead in animation first, then hide it, and show the slide show DP. Lesson I’ve learned: it takes some creative setups. Sometimes I do put myself in a corner, LOL.