# Main Image with Thumbnails

This fully-responsive block includes a main image and a list of thumbnail images. Clicking on a thumbnail image will change the main image to that thumbnail's image.

## Structure

* When this block is added to a page, it is placed within a group called **Blocks container 860 (do not rename)** on the page. This group contains the responsive settings for all blocks.
* This block (**Group imageWithThumbnails**) contains a reusable element called **new\_imagethumbnails**. The reusable element will come with five main elements:
  * **Group Main next image**  - Clicking on this group will scroll to the next image in the thumbnail images list
  * **Group Main image** - This group contains the main image and is displayed as the group's background image
  * **Group PLACEHOLDER 1** and **Group PLACEHOLDER 2** - These are placeholder groups in the block. If you add more elements to the group, please resize these groups and ensure they are not overlapping with any other elements.
  * Clicking on **Group Inner list image** will change the main image to the thumbnail's image
  * All thumbnail images are displayed in **RepeatingGroup Dummy**
    * This repeating group also has two states
      * `Current thing` of data type Dummy (you should update the data type)
      * `Order` of type number

## How to set up

Since this block is in a reusable element, you can only pass data to it from the page with two methods:

1. Update the reusable element data source to the data type you want to pass. \
   For example, you may want to pass a Product or Listing data type that has fields for main image and a list of images. On the page that you have the reusable element instance, make sure you pass the data type.<br>
2. Add states to the reusable element. \
   You would set the states of the reusable element on the page and pass the data from the page to the reusable element.

* Update the data source of **Group Main image**
* Update **RepeatingGroup Dummy's** data source and the data type of its `Current thing` state. You can view the states on the element by clicking on the info icon.
* Modify the workflows in the workflow tab and select the appropriate data to pass to the custom workflows.