# Gallery

> Learn how to use the Gallery component to scroll through pages with slide effects.

https://docs.pandasuite.com/essentials/components/gallery/

**The Gallery component allows you to display a series of images or multimedia content in a dynamic and interactive way. It is ideal for designing portfolios, slideshows, image carousels, or product presentations. It can contain images, shapes, text, and even other components.**

[Video: Gallery example on a tablet: tapping the arrows or swiping the image moves from one photo to the next]

## Use cases

- **Creative portfolios**: Presenting visual or photographic projects.

- **Product carousels**: Interactive displays of products with associated descriptions.

- **Animated slideshows**: Illustrated presentations with integrated animations.

- **Audio guides or virtual tours**: Navigating between various visual or multimedia points of interest.

- **Interactive catalogs**: Browsing through a set of pages or images.

## Setting up the component

### Inserting into the project

Click on **Components** and insert the **Gallery** component.

Place the component wherever you want on your workspace.

### Creating pages

The Gallery component is composed of pages. The user swipes with their finger or mouse to move from one page to another. By default, it contains a single page.

Double-click on the area to edit and add pages.

Click the **+** button to add pages.

[Image: Inside the Gallery component, the Pages list holds three pages and the + button used to add more; page 1 contains a photo]

You can insert all kinds of objects within the pages.

> **Info**
>
> 💡 The **Gallery** component can also be used to add a "slide" effect between
> screens. In this case, enlarge the gallery size to match your screen size and
> insert all your screen content within it.

## Component features

### Properties

Here are the properties of the Gallery component:

- **User interaction:** This option enables user interactions defined on and within the component.
- **Orientation (Horizontal / Vertical):** Choose between horizontal or vertical scrolling.
- **User scrolling (Yes / No):** Enable or disable page scrolling by the user.
- **Default page:** Select the page that automatically displays when the gallery loads. By default, the gallery retains the last page.

[Image: Gallery properties: Orientation set to Horizontal, User scrolling set to Yes and no Default page selected]

### Triggers

You can use the Gallery component to trigger an action.

Select your component and open the **Actions** window. Click **+ New Action** to display the list of triggers:

- **Display page**
- **Tap/Click**
- **Double tap/click**
- **Touch**
- **Release**
- **Swipe up/down/left/right**
- **Mouse enter/leave**

### Interactive actions

You can also create an action on the Gallery component.

Choose the trigger of your choice and the action **Interact with a component**. Select the **Gallery** component, and here is the list of available actions:

- **Select a page**
- **Go to next page**
- **Go to previous page**
- **Random page**

## Practical examples

### Creating a button to navigate between gallery pages

### Automatically scroll the gallery

To automatically scroll your gallery, you can add a [Timer component](https://docs.pandasuite.com/essentials/components/timer/) and a **Synchronization component** to synchronize time values with gallery pages.

You can [synchronize](https://docs.pandasuite.com/essentials/components/synchronization/) your gallery with any other component.

### Open gallery images in full screen

If you want to open images in full screen, use the Pop-up component.

Select your image and add a **Single tap/click** action that runs **Open pop-up** on the [Pop-up component](https://docs.pandasuite.com/essentials/components/pop-up/).

[Image: Page 1 of the gallery: the photo carries a single tap/click action that runs Open pop-up]

[Template: Gallery + Full-screen Pop-up](https://pandasuite.com/dashboard/use-template/szYpEJYBaHn0WhDCQmQF)