📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

The Store Image app exports the list-context.image-list block, which is responsible for the image content in the store theme.

1. Add the store-image app to your theme dependencies in the manifest.json. For example:

 "dependencies ": {
+  "vtex.store-image": "0.x"
 }

You can now use the list-context.image-list block exported by the Store Image app. The block allows you to display images in your store with more composability since you can use it along with other list-context blocks to create a more flexible and customizable image slider.

2. In any desired theme template, add the list-context.image-list block, declaring the slider-layout a child block. For example:

  "list-context.image-list#demo": {
    "children": ["slider-layout#demo-images"],
    "props": {
      "preload": true,
      "height": 650,
      "images": [
        {
          "loading": "eager",
          "image": "https://storecomponents.vteximg.com.br/arquivos/banner-infocard2.png",
          "description": "something something"
        },
        {
          "loading": "lazy",
          "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
    }
  },

Note that the slider-layout block exported from the Slider Layout app is a child block of list-context.image-list. It defines which images will be displayed and their behavior when rendered.

• images array:

• link object:

ℹ️ Use the Admin Site Editor to manage all images declared in the list-context.image-list block.

The block still does not have CSS handles for its specific customization.

All CSS handles available for the Image block are available for the slider-layout block. Take a look at the Customization section in the Slider Layout documentation. Note that the image-slider uses our vtex.slider-layout app, so all the CSS namespaces defined by it are also available for image-slider. See more in Slider Layout.

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!