Carousel blocks
Block's Carousel
Introduction
Slider Layout, like Flex Layout, is a flexible way to create a new block from other blocks using children
. It allows sliders to be created from other blocks, such as info-card
s and even flex-layout
for example.
With the Slider Layout, it is possible to create a carousel not only with images but with any content you want. For this example, we will use the Slider Layout to turn a set of info-cards into a slider.
Slider Layout
Looking at the documentation, we see that you can use an array of blocks like children
, just like in Flex Layout.
Below is an example of implementing a slider-layout with two info-cards
:
"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"
}
}
Activity
In this activity, we will create a brand slider for our website:
-
In the
home.jsonc
file, declare theslider-layout#home
block to thestore.home
template. -
Create a file called
slider-layout.jsonc
inside the/store/blocks
folder; -
In this file, based on the code above, replace the
info-card
declared as children ofslider-layout#home
and add 6 image componentsimage
as children. Use the formatimage# brand1
,image#brand2
(...)image#brand6
to declare the components; -
State a specific
src
prop for each definedimage#brand
. Use the URLs below for each one:https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square1.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square2.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square3.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square4.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square5.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square6.png
-
Finally, you must use the
autoplay
property in theslider-layout# home
block. Make slide happen automatically every 7 seconds and stop when the user hovers over slide .
Note: Remember to access the Slider Layout and Image documentations if you have any questions during the activity.
Any questions?
See the answersheet for this step or check our [office hours] on the VTEX Developers channel(https://www.youtube.com/c/VTEXDevelopers)
Help us make this content better!
VTEX IO courses are open source. If you see something wrong, you can open a pull request!
Make a contributionUpdated 9 months ago