Image Slider / carousel Using Axure RP 8

How to create Image Slider using Axure RP 8

Step-1 -  Open Axure File New

Step-2 - From libraries select Rectangle shape and drag  (Follow below image mention by 1,2,3).

               set the height and width of rectangle as required.

Step-3 -   select image From libraries and place in the rectangle.

Step-4 -  Right click on image and select the import image.

Step-5 - Place image from your computer

Step-6 - Select Both image and rectangle then right click  and convert to Dynamic Panel.

Step-7 - After converting dynamic Panel name it as "image-slider" 

              In outline Page "Right click on State" and select Duplicate state and make 2 duplicate state. 

Step-8 - As per below image added 2 duplicate state and it is name as State 2 and State 3

Step-9 -  Now click on State 2 Image in "Outline Page" it will open the image in new tab .

click on image / double click the image and change the image from computer as 2nd image.

Step-10 - Same step follow for State 3 image also. (change the image from computer)

Step-11 - Select Ellipse from libraries and keep three ellipse below the image for controls

Step-12 - Select all ellipse and "Right click and select" <Selection Group>

Step-13 - Name the Selection group as controls

Step-14 -  Again Select all ellipse and right click and Select "Interaction Styles"

Step-15 - While click on "Interaction Styles" the window will open as below image.

                 In Interaction Styles window select "MouseOver" Tab and select "Fill Color" and pick the color from color picker.

Step-16 - In the same Interaction styles window Select "Selected Tab" and select Fill color and Pick the color from color picker.

Step-17 - Now Name the each Ellipse as control 1, 2, 3 respectively. as mention below image

Step-18 - Select Ellipse 1 and in Properties panel double click on "OnClick" / Add case

Will get below window as "Case Editor"

a.> In Left side click to add actions click on "Set Selected/Checked"

b.>In right side checked "Control 1 ellipse"

c.>  Right side below block "Set Selected State to" Value - true.

Step-19 -  In same case Editor 

                 Left side click "Set Panel State"

                 Right side "Checked" set image slider as dynamic panel

                 Right side below panel "Select State - State 1" , Animation In - Slide-left, t- 500ms

                 Animation Out - Fade, t-500ms

And Press OK

               

Step-20 - Follow the Same Step-19 for remaining State 2 and State 3

Step-21 - Preview (see in web browser)

Step-22 - Final Result (click on bullet (ellipse) see the image is sliding and bullet color is change 

Thanks.