Building a Carousel using Slider Layout

Guides

Introduction

There are block types in VTEX IO's Store Framework that instead of being responsible for rendering store components, such as the shelf, they carry and provide data to their subsequent child blocks.

These blocks are instances of a list-context interface called lists. They are exported by the vtex.list-context app.

Since a Carousel is a slider with images displayed on it, you can create one for your store using one of the available list-context instances together with a slider-layout, a generic layout block that enables you to create a Slider component out of a set of other blocks.

See the instructions below for how it can be easily done!

Step by step

Make sure your store is running vtex.store@2.70.0 or higher.
Add the following dependencies to your theme's manifest.json file:

"vtex.store-image": "0.x",
"vtex.slider-layout": "0.x"

Declare the list-context.image-list block and use the slider-layout as its only child. Each desired image should be forwarded to the list-context.image-list as an object with the following properties:

Property	Type	Description	Default value
`image`	`String`	Link for the image	N/A
`mobileImage`	`String`	Link for the mobile image	N/A
`description`	`String`	The image's description	N/A
`link`	`Link`	Specifies the link the image will redirect to when clicked on	N/A

For example:

"list-context.image-list#demo": {
    "children": ["slider-layout#demo-images"],
    "props": {
      "height": 650,
      "images": [
        {
          "image": "https://storecomponents.vteximg.com.br/files/banner-infocard2.png",
          "description": "something something"
        },
        {
          "image": "https://storecomponents.vteximg.com.br/assets/vtex.file-manager-graphql/images/Group%207%20(1)%20(1)%20(1)%20(1)%20(1)___c6b3ed853fb16a08b265753b50e0c57a.png",
          "description": "something something"
        }
      ]
    }
  },

Bear in mind that list blocks do not render anything in your store, they simply hold content that can be edited using the Site Editor and pass it down to their child blocks.

Now that you've specified which data (in this case, which images) will be displayed in your slider using a list block, you need to configure the slider properties themselves, meaning those of the slider-layout.

For example:

  "list-context.image-list#demo": {
    "children": ["slider-layout#demo-images"],
    "props": {
      "height": 650,
      "images": [
        {
          "image": "https://storecomponents.vteximg.com.br/files/banner-infocard2.png",
          "description": "something something"
        },
        {
          "image": "https://storecomponents.vteximg.com.br/assets/vtex.file-manager-graphql/images/Group%207%20(1)%20(1)%20(1)%20(1)%20(1)___c6b3ed853fb16a08b265753b50e0c57a.png",
          "description": "something something"
        }
      ]
    }
  },
  "slider-layout#demo-images": {
    "props": {
      "itemsPerPage": {
        "desktop": 1,
        "tablet": 1,
        "phone": 1
      },
      "infinite": true
    }
  }

And there you go! You now have a fully functioning Carousel for your store.

{"base64":" ","img":{"width":2860,"height":1396,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1262350,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-building-a-carousel-using-slider-layout-0.gif"}}

When inspecting the page you’ll notice that the carousel block was not used to build the component.

Bear in mind that you are also able to edit data contained in list-context.image-list using the admin's Site Editor section:

{"base64":" ","img":{"width":2874,"height":1638,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":925830,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-building-a-carousel-using-slider-layout-1.png"}}