This page is about version 0.11.0 of the app, which is not the most recent version. The latest stable version is 0.24.6.

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

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

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

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

Prop name	Type	Description	Default value
label	String	Aria label to be used by the <Slider /> component.	'slider'
showNavigationArrows	mobileOnly|desktopOnly|always|never	Controls when should navigation arrows be rendered.	'always'
showPaginationDots	mobileOnly|desktopOnly|always|never	Controls when should pagination dots be rendered.	'always'
infinite	Boolean	Controls if the slider should or should not be infinite.	false
navigationStep	Number|'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'
usePagination	Boolean	Toggles 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
fullWidth	Boolean	Controls whether or not the slides should occupy the full available width, making the arrows appear on top of them.	true
arrowSize	Number	Controls 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

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
paginationDot--isActive