Carousel Module
The Carousel module in PAP allows you to add a dynamic image slider to your app. It enhances visual presentation, supports multiple images, and improves user interaction through smooth transitions and customizable indicators.
Written By Yasaman Shad
Last updated 5 months ago
Accessing the Carousel Module
Open an app in PAP.
Click the Add Items button in the top navigation bar or use the “+” signs on the canvas.
In the left-side New Items pane, locate the Carousel module.
Drag it onto your app canvas. Once placed, click it to open the Carousel Properties Pane.
Carousel Properties and Settings
The properties pane provides full control over how the carousel looks and functions.
1. Image Settings
Add and manage images in the carousel.
To add images:
Select the Carousel module.
In the Image Settings section, click the “+” button.
Enter the Image URL in the input field.
Repeat to add more images.
2. Rotation
Control how images transition in the carousel.
To configure rotation:
Select the Carousel module.
Go to the Rotation section.
Choose a mode:
Auto → Images rotate automatically.
Manual → Users control navigation.
If Manual is selected, configure:
Style → Slide or Fade.
Speed → Adjust transition speed.
3. Slider Indicator
Define how navigation indicators are displayed.
To set up indicators:
Select the Carousel module.
Open the Slider Indicator section.
Choose indicator mode:
Bullet → Circular dots.
Line → Horizontal lines.
Customise indicator colors:
Main Color → Default state.
Accent Color → Active state.
5. Use Cases
Showcase products, services, or app features in a visually engaging way.
Highlight multiple images within a single section for cleaner layouts.
Use dynamic transitions and slide indicators to improve user interaction.