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

Slider Layout

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.

Configuration

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

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

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"
    }
  },

Prop name	Type	Description	Default value
label	string	aria-label attribute value to be used by the <Slider/> component when rendered. The aria-label value should explicitly tell users what the HTML element being inspected is responsible for.	slider
showNavigationArrows	enum	When navigation arrows should be rendered. Possible values are: mobileOnly, desktopOnly, always, or never.	always
showPaginationDots	enum	When pagination dots should be rendered. Possible values are: mobileOnly, desktopOnly, always, or never.	always
infinite	boolean	Whether the slider should be infinite (true) or not (false). When this prop is set as false, the slider will have an explicit end for users.	false
usePagination	boolean	Whether the slider should use slide pages (true) or not (false). When this prop is set as false, the slider will use smooth scrolling for slide navigation instead of arrows.	true
itemsPerPage	object	Number of slider items to be shown on each type of device. For more on this, check out the itemsPerPage object section below.	{ desktop: 5, tablet: 3, phone: 1 }
navigationStep	number / enum	Number of slider items that should be displayed at a time when users click on one of the slider's arrows. It is also possible to set this prop value as page, meaning that the number of slider items to be displayed when one of the arrows is clicked on is equal to the number of slider items set per page (in the itemsPerPage prop).	page
slideTransition	object	Controls the transition animation between slides based on CSS attributes. For more on this, check out the slideTransition object section below.	{ speed: 400, delay: 0, timing: '' }
autoplay	object	Controls the autoplay feature behavior. For more on this, check out the autoplay object section below.	undefined
fullWidth	boolean	Whether the slides should occupy the full page width, making the arrows appear on top of them (true) or not (false).	true
arrowSize	number / object	Slider arrows size (height and width) in pixels. This is a responsive prop, which means you can pass to it an object with different values for each breakpoint (desktop, tablet, and phone).	25

• itemsPerPage object

Prop name	Type	Description	Default value
desktop	number	Number of slides to be shown on desktop devices.	5
tablet	number	Number of slides to be shown on tablet devices.	3
phone	number	Number of slides to be shown on phone devices.	1

• slideTransition object

Prop name	Type	Description	Default value
speed	number	Transition speed (in ms).	400
delay	number	Delay between slides transition (in ms).	0
timing	string	Timing function.	''

• autoplay object

Prop name	Type	Description	Default value
timeout	number	Timeout (in ms) between each slide.	undefined
stopOnHover	boolean	Whether the auto play should stop when users are hovering the slider (true) or not (false).	undefined

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
slide--firstVisible
slide--lastVisible
slideChildrenContainer
sliderLeftArrow
sliderRightArrow
sliderArrows
paginationDotsContainer
paginationDot
paginationDot--isActive

Contributors ✨

Thanks goes to these wonderful people:

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