{"id":39486957,"url":"https://github.com/vtex-apps/slider-layout","last_synced_at":"2026-01-18T05:27:27.660Z","repository":{"id":42920357,"uuid":"207681966","full_name":"vtex-apps/slider-layout","owner":"vtex-apps","description":"A flexible solution for building block sliders in VTEX Store Framework","archived":false,"fork":false,"pushed_at":"2025-08-27T19:20:36.000Z","size":672,"stargazers_count":5,"open_issues_count":11,"forks_count":34,"subscribers_count":43,"default_branch":"master","last_synced_at":"2025-08-28T04:15:58.246Z","etag":null,"topics":["hacktoberfest","srv-store-framework","store-framework","vtex-io","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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-09-10T23:35:26.000Z","updated_at":"2025-08-27T19:20:39.000Z","dependencies_parsed_at":"2025-03-11T17:28:18.642Z","dependency_job_id":"c5e6b863-2aa2-4892-86e0-05e90d332f34","html_url":"https://github.com/vtex-apps/slider-layout","commit_stats":null,"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"purl":"pkg:github/vtex-apps/slider-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fslider-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fslider-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fslider-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fslider-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/slider-layout/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fslider-layout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530810,"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":["hacktoberfest","srv-store-framework","store-framework","vtex-io","xp-developer"],"created_at":"2026-01-18T05:27:27.070Z","updated_at":"2026-01-18T05:27:27.650Z","avatar_url":"https://github.com/vtex-apps.png","language":"TypeScript","readme":"📢 Use this project, [contribute](https://github.com/vtex-apps/slider-layout) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).\n\n# Slider Layout\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\nSlider Layout is a flexible solution for building block sliders in VTEX Store Framework, such as a carousel component.\n\n![](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-slider-layout-0.png)\n\n\u003e _To use the Slider layout as a substitute for the [Carousel app](https://github.com/vtex-apps/carousel), read the [Building a Carousel through lists and Slider Layout](https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-carousel-using-slider-layout) documentation._\n\n## Google Analytics 4 Integration\n\nSlider Layout enables you to integrate your component with [Google Analytics 4](https://developers.google.com/analytics/devguides/collection/ga4). \nThe integration happens through the [`GA4 view_promotion`](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#view_promotion) event, which is typically associated with the promotion banners carousel displayed by the Slider Layout.\n\nBy integrating with Google Analytics 4, you can set the `Product ID` and `Product Name`, and position of your promotion on [Site Editor](https://help.vtex.com/en/tutorial/site-editor-overview--299Dbeb9mFczUTyNQ9xPe1) to be shown on a Google Analytics dashboard.\n\nTo set this up, go to the VTEX Admin, access **Storefront \u003e Site Editor**, and open the image settings of the internal promotion you want to track. These settings are displayed on the right side of the page.\n\n![ga4-in-site-editor](https://vtexhelp.vtexassets.com/assets/docs/src/gtm-site-editor___bc52365aafad63deb5bfed1d74f307c0.png)\n\n\u003e For more information about managing your page content, read [Managing page and template content](https://help.vtex.com/en/tutorial/managing-page-and-template-content--3tMbx6HXy4Fy5r9EhboG37).\n\nAfter setup, Google Analytics can track your internal promotions and generate reports of their views, clicks, click-through rate, conversions, and revenue.\n\n## Configuration\n\n1. Add the `slider-layout` app to your theme dependencies in the `manifest.json` file:\n\n```json\n\"dependencies\": {\n \"vtex.slider-layout\": \"0.x\"\n}\n```\n\nNow, you can use all blocks exported by the `slider-layout` app. See the complete list below:\n\n| Block name | Description |\n| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `slider-layout` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Builds block sliders for your store through its `children` list blocks. |\n| `slider-layout-group` | Enables you to keep a group of `slider-layout` blocks synched with each other. For more information about this, see the Advanced configuration section below. |\n\n2. Add the `slider-layout` block to your template. For example:\n\n```json\n \"slider-layout#text-test\": {\n \"props\": {\n \"itemsPerPage\": {\n \"desktop\": 1,\n \"tablet\": 1,\n \"phone\": 1\n },\n \"infinite\": true,\n \"showNavigationArrows\": \"desktopOnly\",\n \"blockClass\": \"carousel\"\n },\n \"children\": [\"rich-text#1\", \"rich-text#2\", \"rich-text#3\"]\n },\n\n \"rich-text#1\": {\n \"props\": {\n \"text\": \"Test1\"\n }\n },\n \"rich-text#2\": {\n \"props\": {\n \"text\": \"Test2\"\n }\n },\n \"rich-text#3\": {\n \"props\": {\n \"text\": \"Test3\"\n }\n },\n```\n\n| Prop name | Type | Description | Default value |\n| ---------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------- |\n| `label` | `string` | `aria-label` attribute value to be used by the `\u003cSlider/\u003e` component when rendered. The `aria-label` value should explicitly tell users what the inspected HTML element does. | `slider` |\n| `showNavigationArrows` | `enum` | Indicates when navigation arrows should be rendered. Possible values are: `mobileOnly`, `desktopOnly`, `always`, or `never`. | `always` |\n| `showPaginationDots` | `enum` | Indicates when pagination dots should be rendered. Possible values are: `mobileOnly`, `desktopOnly`, `always`, or `never`. | `always` |\n| `infinite` | `boolean` | Determines whether the slider should be infinite (`true`) or not (`false`). When this prop is set as `false`, the slider will have an explicit end for users. | `false` |\n| `usePagination` | `boolean` | Determines whether the slider should use slide pages (`true`) or not (`false`). When this prop is set as `false`, the slider will use smooth scrolling for slide navigation instead of arrows. | `true` |\n| `itemsPerPage` | `object` | The number of slider items to be shown on each type of device. For more information about this, see the `itemsPerPage` object section below. | `{ desktop: 5, tablet: 3, phone: 1 }` |\n| `navigationStep` | `number` / `enum` | The number of slider items that should be displayed when users click one of the slider arrows. It is also possible to set this prop value as `page`, meaning that the number of slider items to be displayed when one of the arrows is clicked is equal to the number of slider items set per page (in the `itemsPerPage` prop). | `page` |\n| `slideTransition` | `object` | Controls the transition animation between slides based on [CSS attributes](https://developer.mozilla.org/en-US/docs/Web/CSS/transition). For more information about this, see the `slideTransition` object section below. | `{ speed: 400, delay: 0, timing: '' }` |\n| `autoplay` | `object` | Controls the autoplay feature behavior. For more information about this, see the `autoplay` object section below. | `undefined` |\n| `fullWidth` | `boolean` | Determines whether the slides should occupy the full page width, making the arrows appear on top of them (`true`) or not (`false`). | `true` |\n| `arrowSize` | `number` / `object` | Slider arrows size (height and width) in pixels. This is a responsive prop, which means you can pass to it an object with different values for each breakpoint (`desktop`, `mobile`, `tablet`, and `phone`). | `25` |\n| `centerMode` | `enum` / `object` | Defines positioning of the slider elements on the screen. Possible values are: `center` (elements are centered, allowing users to see a peek of the previous and next slides), `to-the-left` (aligns elements to the left side, allowing users to see a peek of the next slide, but not the previous one), and `disabled` (disables the feature, rendering elements on the whole screen without showing a peek of the previous and next slides). Note: This is a responsive prop, which means you can pass to it an object with different values for each breakpoint (`desktop`, `mobile`, `tablet`, and `phone`). | `disabled` |\n| `centerModeSlidesGap` | `number` | Number of pixels between slides when `centerMode` is set to `center` or `to-the-left`. | `undefined` |\n\n- **`itemsPerPage` object**\n\n| Prop name | Type | Description | Default value |\n| --------- | -------- | -------------------------------------------------------- | ------------- |\n| `desktop` | `number` | The number of slides to be displayed on desktop devices. | `5` |\n| `tablet` | `number` | The number of slides to be displayed on tablet devices. | `3` |\n| `phone` | `number` | The number of slides to be displayed on phone devices. | `1` |\n\n- **`slideTransition` object**\n\n| Prop name | Type | Description | Default value |\n| --------- | -------- | ----------------------------------------- | ------------- |\n| `speed` | `number` | Transition speed (in `ms`). | `400` |\n| `delay` | `number` | Delay between slide transition (in `ms`). | `0` |\n| `timing` | `string` | Timing function. | `''` |\n\n- **`autoplay` object**\n\n| Prop name | Type | Description | Default value |\n| ------------- | --------- | -------------------------------------------------------------------------------------------------------------- | ------------- |\n| `timeout` | `number` | Timeout (in `ms`) between each slide. | `undefined` |\n| `stopOnHover` | `boolean` | Determines whether the autoplay should stop when users are hovering over the slider (`true`) or not (`false`). | `undefined` |\n\n## Advanced configuration\n\nThe `slider-layout-group` block synchronizes the slides rendered by each `slider-layout` block declared in it.\n\nTherefore, the `slider-layout-group` does not render any specific component on the store UI. It is really a logical block that only expects to receive a `children` block list containing the desired `slider-layout` blocks that should be rendered. For example:\n\n```json\n{\n \"slider-layout-group#test\": {\n \"children\": [\"slider-layout#1\", \"slider-layout#2\", \"slider-layout#3\"]\n }\n}\n```\n\nBelow, you can find a practical example using three `slider-layout` blocks inside of a `slider-layout-group`. Each `slider-layout` received three `rich-text` blocks as `children` to serve as individual slides:\n\n![slider-layout-group demo](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-slider-layout-3.gif)\n\n\u003e ⚠️ **\\*All `slider-layout` blocks declared in the `slider-layout-group` must have the same configuration, meaning the same props and values**. Due to implementation rules, they can only differ in their `children` block list. Keep in mind that declaring `slider-layout` blocks with different configurations will result in unexpected behavior, leading to errors that are **not** supported by the VTEX Store Framework team.\\*\n\n## Customization\n\nTo apply CSS customizations to this and other blocks, follow the instructions given in the recipe on [Using CSS handles for store customization](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).\n\n| CSS handles |\n| ------------------------- |\n| `paginationDot--isActive` |\n| `paginationDot` |\n| `paginationDotsContainer` |\n| `slide--firstVisible` |\n| `slide--hidden` |\n| `slide--lastVisible` |\n| `slide--visible` |\n| `slideChildrenContainer` |\n| `slide` |\n| `sliderArrows` |\n| `sliderLayoutContainer` |\n| `sliderLeftArrow` |\n| `sliderRightArrow` |\n| `sliderTrackContainer` |\n| `sliderTrack` |\n\n\u003c!-- DOCS-IGNORE:start --\u003e\n\n## Contributors ✨\n\nThanks goes to these wonderful people:\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!\n\n\u003c!-- DOCS-IGNORE:end --\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fslider-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Fslider-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fslider-layout/lists"}