# Multimedia Slideshow Popup

## Overview

A popup that includes multiple items in a slideshow format. Each item has an image and other details such as user profile information and number of likes or view count.

## Structure

This fully responsive popup is built with a floating group instead of a popup so it can stretch to the full width and height of the page. It has left and right navigational buttons to move through each item. A user can also click on a navigational dot to go to a specific entry.

This popup consists of a few main UI components:

* **RepeatingGroup Media**\
  For demo purpose, we are using Arbitrary text for this repeating group's data source. [Click here](https://docs.airdev.co/canvas/canvas-library/updating-asset-rg-data-source) to learn how to change the data source.
* Clicking on **Group Close (Slideshow)** with close the floating group popup.
* Clicking on **Group Main left nav** and **Group Main right nav** will navigate to the previous or next entry in **RepeatingGroup Media**.
* **Group Main media user and details contains UI** for displaying a user profile, name, media likes and view count. The data sources for these elements will need to be updated after you update the repeating group's data source.
*  **Group Main navigational dots** includes a repeating group that should always reference **RepeatingGroup Media's** data source. Clicking on a dot will trigger a workflow to navigate to the entry.

## How to set up

* Update **RepeatingGroup Media's** data source to your own data type. You'll need to also change the type of content field for some of the intermediate groups in **Group Inner current cell media**.
* Update **RepeatingGroup Navigational dots's** data type to match the data type of **RepeatingGroup Media.**
* Update the other UI elements' data source to reference fields in the data type you selected above.