# Embla Carousel

📢 Use this project, [contribute](https://github.com/%7BOrganizationName%7D/%7BAppName%7D) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

## Embla Carousel

[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

Under the app's name, you should explain the topic, giving a **brief description** of its **functionality** in a store when installed.

Next, **add media** (either an image of a GIF) with the rendered components, so that users can better understand how the app works in practice.

![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png)

### Configuration

1. Adding the app as a theme dependency using `eplus-cli`

```bash
eplus io add embla-carousel
```

or do manually and add in the `manifest.json` file;

```json
{
  "{vendor}.embla-carousel": "0.x"
}
```

1. Declaring the app's main block in a given theme template or inside another block from the theme.

| block name                        | description |
| --------------------------------- | ----------- |
| `embla-carousel`                  | XXXX        |
| `embla-carousel.group`            | XXXX        |
| `embla-carousel.stop-propagation` | XXXX        |

#### `embla-carousel` props

| Prop name    | Type      | Description | Default value |
| ------------ | --------- | ----------- | ------------- |
| `options`    | `object`  | XXXX        |               |
| `blockClass` | `string`  | XXXX        | `[]`          |
| `slides`     | `element` | XXXX        |               |

* `options` object:

| Prop name              | Type               | Description | Default value |
| ---------------------- | ------------------ | ----------- | ------------- |
| `dots`                 | `boolean`          | XXXX        | \`\`          |
| `navigation`           | `boolean`          | XXXX        | \`\`          |
| `autoplay`             | `object`           | XXXX        | \`\`          |
| `disabledPreventClick` | `boolean`          | XXXX        | \`\`          |
| `breakpoints`          | `EmblaBreakpoints` | XXXX        | \`\`          |
| `slidesPerView`        | `number`           | XXXX        | \`\`          |
| `preventClick`         | `boolean`          | XXXX        | \`\`          |
| `forceLoop`            | `boolean`          | XXXX        | \`\`          |
| `alwaysShowNavigation` | `boolean`          | XXXX        | \`\`          |

* `autoplay` object:

| Prop name           | Type      | Description | Default value |
| ------------------- | --------- | ----------- | ------------- |
| `delay`             | `number`  | XXXX        | \`\`          |
| `stopOnInteraction` | `boolean` | XXXX        | \`\`          |
| `playOnInit`        | `boolean` | XXXX        | \`\`          |

#### `embla-carousel.group` props

| Prop name    | Type     | Description | Default value |
| ------------ | -------- | ----------- | ------------- |
| `startIndex` | `number` | XXXXXXXX    | `XXXXXX`      |

### Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

| CSS Handles            |
| ---------------------- |
| `container`            |
| `viewport`             |
| `emblaContainer`       |
| `emblaSlide`           |
| `emblaInnerSlide`      |
| `isSelected`           |
| `containerDots`        |
| `containerNavigation`  |
| `containerGroup`       |
| `viewportGroup`        |
| `emblaContainerGroup`  |
| `emblaSlideGroup`      |
| `emblaInnerSlideGroup` |
| `loading`              |
| `notEnoughSlides`      |
| `dotButton`            |
| `dotButtonSelected`    |
| `prevButton`           |
| `inactive`             |
| `nextButton`           |
| `inactive`             |

### Contributors ✨

Thanks goes to these wonderful people:

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!
