Thursday 21 September 2017

Content Slider / Carousel Using Axure RP 8

How to create Content Slider using Axure RP 8

Step - 1 - Open New file - From Libraries select Rectangle and set width and height as per                            below image


Step -2 - From Libraries select H1, H3 and place in  Rectangle  and Edit the Text


Step - 3 -  Select the text and change font color and font-size as per below image


Step - 4 -   Select All element and right click and select to convert to Dynamic Panel



Step - 5 - After converting to Dynamic Panel  and Name the Dynamic Panel as Content-Slider
                 see - Outline : Page there State is created 
                Now create 2 duplicate State .


Step - 6 - Now click on State 2 it will open in new Tab, and Edit the text in the Rectangle and do the same with State 3 also.


Step -7 - Come Back to home Tab


Step - 8 - From Libraries Select the Rectangle Shape and Resize the Rectangle shape to Small, and create the 2 more same shape and make it centered align.


Step - 9 - Select All rectangle Shape and right click and click on Selection Group


Step -10 - Name the Selection Group as Controls


Step - 11 - Again Select all rectangle Shape and right click and select Interaction Styles


Step - 12 - In Interaction Styles window Select MouseOver Tab and checked Fill color and Border


Step - 13 - In Interaction Styles Select the Selected Tab and checked Fill color and Border


Step - 14 - Name each Rectangle as Control 1, 2,3 respectively.


Step - 15 - Click on 1st Rectangle and double click on "OnClick" and next step to add case


Step - 16 - In Add Case 

"Click to add actions - widgets -> Set Selected / Checked"

"Configure actions -> checked -> Control 1"

"Set Selected state to -> Value - True"

"Press - OK"


Step - 17 - In Add Case

"Click to add actions - widgets -> Set Panel State"

"Configure actions -> checked -> Set Content Slider "

"Selected state - State 1"
"Animation In - Slide left" "t - 500 ms"
"Animation Out - Fade" "t - 500 ms"

Press -OK



Step -18 - preview


Step -19 - See in Web Browser



Thanks.



















No comments:

Post a Comment