Slider Layout is a flexible solution for building sliders of blocks within VTEX Store Framework, such as a carousel component.

In order to use the Slider Layout as a substitute to the Carousel app, check out the Building a Carousel through lists and Slider Layout documentation.

Slider layout also gives you the possibility to integrate your component with the Google Analytics Enhanced Ecommerce feature. With this integration, you will be able to set up your promotion’s ID, name, and position on the Site Editor to be shown on a Google Analytics dashboard.

To do so, you must go to your store’s Admin, click Store Setup > CMS > Site Editor and open the image configurations of the internal promotion you want to track. These configurations are displayed on the right side of the page.

For more information about managing your page content, access Managing page and template content.

With everything set up, Google Analytics is now able to track your internal promotions and generate reports of its views, clicks, click-through rate, conversions, and revenue.

1. Add the slider-layout app to your theme's dependencies in the manifest.json file:

"dependencies": {
  "vtex.slider-layout": "0.x"
}

Now, you are able to use all blocks exported by the slider-layout app. Check out the full list below:

Block name	Description
slider-layout	Builds sliders of blocks for your store through its children list blocks.
slider-layout-group	Enables you to keep a group of slider-layout blocks in sync with each other. For more on this, check out the Advanced configurations section below.

2. Add the slider-layout block to your template. For example:

  "slider-layout#text-test": {
    "props": {
      "itemsPerPage": {
        "desktop": 1,
        "tablet": 1,
        "phone": 1
      },
      "infinite": true,
      "showNavigationArrows": "desktopOnly",
      "blockClass": "carousel"
    },
    "children": ["rich-text#1", "rich-text#2", "rich-text#3"]
  },

  "rich-text#1": {
    "props": {
      "text": "Test1"
    }
  },
  "rich-text#2": {
    "props": {
      "text": "Test2"
    }
  },
  "rich-text#3": {
    "props": {
      "text": "Test3"
    }
  },

• itemsPerPage object

• slideTransition object

• autoplay object

The slider-layout-group block is responsible for synchronizing the slides rendered by each one of the slider-layout blocks declared in it.

The slider-layout-group therefore does not render any specific component on your store's UI. In turn, it is a logical block that only expects to receive a children block list containing the desired slider-layout blocks to be rendered. For example:

{
  "slider-layout-group#test": {
    "children": ["slider-layout#1", "slider-layout#2", "slider-layout#3"]
  }
}

Below, you can find a practical example using three slider-layout blocks inside of a slider-layout-group. Each of those slider-layouts received three rich-text blocks as children to serve as individual slides:

*All slider-layout blocks declared in the slider-layout-group must receive the same configuration, meaning the same props and values. Due to implementation rules, they are only allowed to differ in their children block list. Notice the following: declaring slider-layout blocks with different configuration will result in unexpected behavior, leading to errors whose support is not granted by the VTEX Store Framework team.*

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.