VTEX Slider-Layout

Slider-Layout is a flexible solution for building sliders of blocks within VTEX IO Store Framework.

⚠️ In order to use the slider-layout as a substitute to the carousel component, check this recipe out.

Configuration

  1. Add the slider-layout app to your theme's dependencies in the manifest.json, for example:
"dependencies": {
  "vtex.slider-layout": "0.x"
}
  1. Add the slider-layout to your template. For example:
 "slider-layout#home": {
   "children": ["info-card#1", "info-card#2"],
   "props": {
     "autoplay": {
       "timeout": 5000,
       "stopOnHover": false
     }
   }
 },
  
 "info-card#1": {
   "props": {
     "imageUrl": "https://images.unsplash.com/photo-1524185962737-ea7c028a12cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
     "isFullModeStyle": true,
     "headline": "Black Friday",
     "callToActionText": "Subscribe",
     "textPosition": "center"
   }
 },
  
 "info-card#2": {
   "props": {
     "imageUrl": "https://images.unsplash.com/photo-1524185962737-ea7c028a12cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
     "isFullModeStyle": true,
     "headline": "Black Friday",
     "callToActionText": "Subscribe",
     "textPosition": "center"
   }
 }
Prop nameTypeDescriptionDefault value
labelStringAria label to be used by the <Slider /> component.'slider'
showNavigationArrowsmobileOnly|desktopOnly|always|neverControls when should navigation arrows be rendered.'always'
showPaginationDotsmobileOnly|desktopOnly|always|neverControls when should pagination dots be rendered.'always'
infiniteBooleanControls if the slider should or should not be infinite.false
navigationStepNumber|'page'How many slides should be slid when the user navigates. When set to 'page', the number of slides that will slide is equal to the number of slides in a page of the slider.'page'
usePaginationBooleanToggles whether or not to use a fluid scroll for navigation, disabling the notion of a "page".true
itemsPerPage{ desktop: Number, tablet: Number, phone: Number }Controls how many slides should be shown on each type of device.{ desktop: 5, tablet: 3, phone: 1 }
slideTransition{ speed: Number, delay: Number, timing: String }Controls the transition animation between slides.{ speed: 400, delay: 0, timing: '' }
autoplay{ timeout: Number, stopOnHover: Boolean }Controls the autoplay feature.undefined
fullWidthBooleanControls whether or not the slides should occupy the full available width, making the arrows appear on top of them.true
arrowSizeNumberControls the size (height and width) in pixels of the arrows. This is a responsive prop, which means you can pass different values for each breakpoint.25

Customization

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.

CSS Handles
sliderLayoutContainer
sliderTrackContainer
sliderTrack
slide
slideChildrenContainer
sliderLeftArrow
sliderRightArrow
sliderArrows
paginationDotsContainer
paginationDot