{"id":39487791,"url":"https://github.com/vtex-apps/carousel","last_synced_at":"2026-01-18T05:29:18.200Z","repository":{"id":31410279,"uuid":"127786515","full_name":"vtex-apps/carousel","owner":"vtex-apps","description":"VTEX Carousel app","archived":false,"fork":false,"pushed_at":"2025-07-26T00:00:34.000Z","size":1853,"stargazers_count":1,"open_issues_count":3,"forks_count":9,"subscribers_count":48,"default_branch":"master","last_synced_at":"2025-07-26T07:17:44.920Z","etag":null,"topics":["carousel","hacktoberfest","srv-store-framework","store-framework","xp-developer"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vtex-apps.png","metadata":{"files":{"readme":"docs/README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-04-02T17:05:16.000Z","updated_at":"2025-04-14T19:13:48.000Z","dependencies_parsed_at":"2025-04-09T18:31:34.221Z","dependency_job_id":"b5f9bab4-481a-4f16-8805-87b04c14c460","html_url":"https://github.com/vtex-apps/carousel","commit_stats":null,"previous_names":[],"tags_count":58,"template":false,"template_full_name":null,"purl":"pkg:github/vtex-apps/carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fcarousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fcarousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fcarousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fcarousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/carousel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fcarousel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel","hacktoberfest","srv-store-framework","store-framework","xp-developer"],"created_at":"2026-01-18T05:29:18.112Z","updated_at":"2026-01-18T05:29:18.188Z","avatar_url":"https://github.com/vtex-apps.png","language":"TypeScript","readme":"# VTEX Carousel ![https://img.shields.io/badge/-Deprecated-red](https://img.shields.io/badge/-Deprecated-red)\n\n:warning: **The Carousel app has been deprecated**. Although support for this block is still granted, we strongly recommend you to [update your store theme's carousel using the Slider Layout](https://vtex.io/docs/recipes/layout/building-a-carousel-through-lists-and-slider-layout) in order to keep up with the component's evolution.\n\nThe VTEX Carousel app is a store component that shows a collection of banners, and this app is used by store theme.\n\n:loudspeaker: **Disclaimer:** Don't fork this project; use, contribute, or open issue with your feature request.\n\n## Release schedule\n\n| Release |       Status        | Initial Release | Maintenance LTS Start | End-of-life | Store Compatibility |\n| :-----: | :-----------------: | :-------------: | :-------------------: | :---------: | :-----------------: |\n|  [2.x]  | **Current Release** |   2018-11-28    |                       |             |         2.x         |\n|  [1.x]  | **Maintenance LTS** |   2018-05-02    |      2018-11-28       | March 2019  |         1.x         |\n\nSee our [LTS policy](https://github.com/vtex-apps/awesome-io#lts-policy) for more information.\n\n## Table of Contents\n\n- [Usage](#usage)\n  - [Blocks API](#blocks-api)\n    - [Configuration](#configuration)\n  - [Styles API](#styles-api)\n    - [CSS namespaces](#css-namespaces)\n- [Troubleshooting](#troubleshooting)\n- [Contributing](#contributing)\n- [Tests](#tests)\n\n## Usage\n\nThis app uses our store builder with the blocks architecture. To know more about Store Builder [click here.](https://help.vtex.com/en/tutorial/understanding-storebuilder-and-stylesbuilder#structuring-and-configuring-our-store-with-object-object)\n\nWe add the carousel as a block in our [Store](https://github.com/vtex-apps/store/blob/master/store/interfaces.json).\n\nTo configure or customize this app, you need to import it in your dependencies in `manifest.json`.\n\n```json\n  dependencies: {\n    \"vtex.carousel\": \"2.x\"\n  }\n```\n\nThen, add `carousel` block into your app theme as we do in our [Store theme app](https://github.com/vtex-apps/store-theme/blob/master/store/blocks.json).\n\nNow, you can change the behavior of the carousel block that is in the store header. See an example of how to configure:\n\n```json\n\"carousel#home\": {\n    \"props\": {\n      \"autoplay\": true,\n      \"autoplaySpeed\": 4,\n      \"banners\": [],\n      \"height\": 440,\n      \"showArrows\": true,\n      \"showDots\": true\n    }\n  }\n```\n\n### Blocks API\n\nWhen implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within carousel and describes if they are required or optional.\n\n```json\n\"carousel\": {\n  \"component\": \"Carousel\"\n}\n```\n\nFor now this block does not have any required or optional blocks.\n\n#### Configuration\n\nThrough the Storefront, you can change the carousel's behavior and interface. However, you also can make in your theme app, as Store theme does.\n\n| Prop name       | Type            | Description                                        | Default value |\n| --------------- | --------------- | -------------------------------------------------- | ------------- |\n| `autoplay`      | `Boolean`       | Enable automatic banner transition                 | true          |\n| `autoplaySpeed` | `Number`        | Set the automatic banner transition interval       | 5             |\n| `showDots`      | `Boolean`       | Shows the carousel dots                            | true          |\n| `showArrows`    | `Boolean`       | Shows the carousel arrows                          | true          |\n| `height`        | `Number`        | Set banners height                                 | 420           |\n| `banners`       | `Array(Banner)` | Array of banners the will be shown in the carousel | []            |\n\nBanner:\n\n| Prop name           | Type      | Description                                                                     | Default value |\n| ------------------- | --------- | ------------------------------------------------------------------------------- | ------------- |\n| `image`             | `String`  | Link for the image of the banner                                                | N/A           |\n| `mobileImage`       | `String`  | Link for the mobile image of the banner                                         | N/A           |\n| `tabletImage`       | `String`  | Link for the table image of the banner                                          | N/A           |\n| `description`       | `String`  | The image's description                                                         | N/A           |\n| `url`               | `String`  | The URL where the image is pointing to, in case of external route               | N/A           |\n| `page`              | `String`  | The page where the image is pointing to                                         | N/A           |\n| `params`            | `String`  | Parameters of the URL                                                           | N/A           |\n| `externalRoute`     | `Boolean` | Indicates if the route is external or not                                       | false         |\n| `customInternalURL` | `String`  | The relative link to where where the image is pointing to (for internal routes) | N/A           |\n\n### Styles API\n\nThis app provides some CSS classes as an API for style customization.\n\nTo use this CSS API, you must add the `styles` builder and create an app styling CSS file.\n\n1. Add the `styles` builder to your `manifest.json`:\n\n```json\n  \"builders\": {\n    \"styles\": \"1.x\"\n  }\n```\n\n2. Create a file called `vtex.carousel.css` inside the `styles/css` folder. Add your custom styles:\n\n```css\n.container {\n  margin-top: 10px;\n}\n```\n\n#### CSS namespaces\n\nBelow, we describe the namespaces that are defined in the `Carousel`.\n\n| Class name               | Description                                                                    | Component Source                                                                             |\n| ------------------------ | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- |\n| `container`              | The main container of the `Carousel`                                           | [Carousel](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Carousel.tsx) |\n| `sliderRoot`             | The main container of the `Slider`                                             | [Carousel](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Carousel.tsx) |\n| `sliderFrame`            | The element that contains the Slides                                           | [Carousel](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Carousel.tsx) |\n| `slide`                  | The container of the `Banner` component                                        | [Carousel](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Carousel.tsx) |\n| `arrow`                  | The container of the arrow svg (this namespace is applied to both arrows)      | [Carousel](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Carousel.tsx) |\n| `arrowLeft`              | The container of the left arrow svg                                            | [Carousel](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Carousel.tsx) |\n| `arrowRight`             | The container of the right arrow svg                                           | [Carousel](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Carousel.tsx) |\n| `arrowsContainerWrapper` | The wrapper of the container of the arrows                                     | [Carousel](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Carousel.tsx) |\n| `arrowsContainer`        | The container of the arrows                                                    | [Carousel](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Carousel.tsx) |\n| `containerDots`          | The main container of the dots                                                 | [Carousel](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Carousel.tsx) |\n| `notActiveDot`           | The element of the dots that are not actives                                   | [Carousel](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Carousel.tsx) |\n| `dot`                    | The element of the dot                                                         | [Carousel](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Carousel.tsx) |\n| `activeDot`              | The current active dot                                                         | [Carousel](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Carousel.tsx) |\n| `containerImg`           | The container of the image                                                     | [Banner](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Banner.tsx)     |\n| `imgRegular`             | The wrapper of the `img` element used to center the image inside the container | [Banner](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Banner.tsx)     |\n| `img`                    | The `img` element                                                              | [Banner](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Banner.tsx)     |\n| `bannerLink`             | The `a` element that wraps the whole `Banner` component                        | [Banner](https://github.com/vtex-apps/carousel/blob/feature/new-slider/react/Banner.tsx)     |\n\n## Troubleshooting\n\nYou can check if others are passing through similar issues [here](https://github.com/vtex-apps/carousel/issues). Also feel free to [open issues](https://github.com/vtex-apps/carousel/issues/new) or contribute with pull requests.\n\n## Contributing\n\nCheck it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.\n\n## Tests\n\nTo execute our tests go to `react/` folder and run `npm test`\n\n### Travis CI\n\n[![Build Status](https://travis-ci.org/vtex-apps/carousel.svg?branch=master)](https://travis-ci.org/vtex-apps/carousel)\n[![Coverage Status](https://coveralls.io/repos/github/vtex-apps/carousel/badge.svg?branch=master)](https://coveralls.io/github/vtex-apps/carousel?branch=master)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fcarousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Fcarousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fcarousel/lists"}