Carousel
A media slider component for images, videos, and content.
---
block:
_bookshop_name: layouts/carousel
slides:
- content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: null
shape:
type: null
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: xl
horizontal: xl
background:
color: subtle
scheme: null
shadow: null
transforms:
scale: null
scale_x: null
scale_y: null
rotate: null
skew_x: null
skew_y: null
translate_x: null
translate_y: null
blur: null
opacity: null
image:
src: null
alt: null
style:
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: layouts/split
gap: s
reverse: null
position: center
first:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: 200
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: The Strength of a Tree
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: null
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: >-
Rooted in the earth, reaching for the sky—trees symbolize
resilience, growth, and life itself.
align: null
size: null
decoration: null
margin:
top: null
bottom: null
- _bookshop_name: elements/button
link: null
icon:
display_mode: null
name: null
position: null
label: Learn more
layout: null
size: null
type: primary
outline: false
last:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: elements/image
src: /assets/images/bg.jpg
alt: Forest
style:
opacity: 1
rounded: l
background:
enabled: null
horizontal_position: center
vertical_position: center
- content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: null
shape:
type: null
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: xl
horizontal: xl
background:
color: subtle
scheme: null
shadow: null
transforms:
scale: null
scale_x: null
scale_y: null
rotate: null
skew_x: null
skew_y: null
translate_x: null
translate_y: null
blur: null
opacity: null
image:
src: null
alt: null
style:
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: layouts/split
gap: s
reverse: null
position: center
first:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: 200
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: The Craft of Fine Furniture
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: null
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: >-
Built to last, designed for comfort—great furniture blends
craftsmanship with timeless style.
align: null
size: null
decoration: null
margin:
top: null
bottom: null
- _bookshop_name: elements/button
link: null
icon:
display_mode: null
name: null
position: null
label: Learn more
layout: null
size: null
type: primary
outline: false
last:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: elements/image
src: /assets/images/furniture.jpg
alt: Furniture
style:
opacity: 1
rounded: l
background:
enabled: null
horizontal_position: center
vertical_position: center
- content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: null
shape:
type: null
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: xl
horizontal: xl
background:
color: subtle
scheme: null
shadow: null
transforms:
scale: null
scale_x: null
scale_y: null
rotate: null
skew_x: null
skew_y: null
translate_x: null
translate_y: null
blur: null
opacity: null
image:
src: null
alt: null
style:
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: layouts/split
gap: s
reverse: true
position: center
first:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: 200
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: The Power of a Computer
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: null
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: >-
Innovation at your fingertips—computers unlock creativity,
efficiency, and endless possibilities.
align: null
size: null
decoration: null
margin:
top: null
bottom: null
- _bookshop_name: elements/button
link: null
icon:
display_mode: null
name: null
position: null
label: Learn more
layout: null
size: null
type: primary
outline: false
last:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: elements/image
src: /assets/images/computer.svg
alt: Computer
style:
opacity: 1
rounded: l
background:
enabled: null
horizontal_position: center
vertical_position: center
options:
content_alignment: top
infinite_scrolling: false
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
Properties
slidesobject array
An array slides in the carousel.
content_blockscomponent array
The components that make up a slide.
optionsobject
Settings to configure the carousel
content_alignmentenum
Each slide is resized to match the height of the tallest slide. This setting controls the vertical alignment of slides whose content is smaller than that height.
top |
Aligns content to the top. |
center |
Aligns content to the center. |
bottom |
Aligns content to the bottom. |
infinite_scrollingboolean
When enabled, the carousel loops infinitely in the scrolled direction.
Examples
Infinite Scrolling
---
block:
_bookshop_name: layouts/carousel
slides:
- content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: null
shape:
type: null
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: xl
horizontal: xl
background:
color: subtle
scheme: null
shadow: null
transforms:
scale: null
scale_x: null
scale_y: null
rotate: null
skew_x: null
skew_y: null
translate_x: null
translate_y: null
blur: null
opacity: null
image:
src: null
alt: null
style:
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: layouts/split
gap: s
reverse: null
position: center
first:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: 200
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: The Strength of a Tree
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: null
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: >-
Rooted in the earth, reaching for the sky—trees symbolize
resilience, growth, and life itself.
align: null
size: null
decoration: null
margin:
top: null
bottom: null
- _bookshop_name: elements/button
link: null
icon:
display_mode: null
name: null
position: null
label: Learn more
layout: null
size: null
type: primary
outline: false
last:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: elements/image
src: /assets/images/bg.jpg
alt: Forest
style:
opacity: 1
rounded: l
background:
enabled: null
horizontal_position: center
vertical_position: center
- content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: null
shape:
type: null
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: xl
horizontal: xl
background:
color: subtle
scheme: null
shadow: null
transforms:
scale: null
scale_x: null
scale_y: null
rotate: null
skew_x: null
skew_y: null
translate_x: null
translate_y: null
blur: null
opacity: null
image:
src: null
alt: null
style:
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: layouts/split
gap: s
reverse: null
position: center
first:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: 200
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: The Craft of Fine Furniture
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: null
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: >-
Built to last, designed for comfort—great furniture blends
craftsmanship with timeless style.
align: null
size: null
decoration: null
margin:
top: null
bottom: null
- _bookshop_name: elements/button
link: null
icon:
display_mode: null
name: null
position: null
label: Learn more
layout: null
size: null
type: primary
outline: false
last:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: elements/image
src: /assets/images/furniture.jpg
alt: Furniture
style:
opacity: 1
rounded: l
background:
enabled: null
horizontal_position: center
vertical_position: center
- content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: null
shape:
type: null
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: xl
horizontal: xl
background:
color: subtle
scheme: null
shadow: null
transforms:
scale: null
scale_x: null
scale_y: null
rotate: null
skew_x: null
skew_y: null
translate_x: null
translate_y: null
blur: null
opacity: null
image:
src: null
alt: null
style:
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: layouts/split
gap: s
reverse: true
position: center
first:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: 200
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: The Power of a Computer
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: null
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: >-
Innovation at your fingertips—computers unlock creativity,
efficiency, and endless possibilities.
align: null
size: null
decoration: null
margin:
top: null
bottom: null
- _bookshop_name: elements/button
link: null
icon:
display_mode: null
name: null
position: null
label: Learn more
layout: null
size: null
type: primary
outline: false
last:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: elements/image
src: /assets/images/computer.svg
alt: Computer
style:
opacity: 1
rounded: l
background:
enabled: null
horizontal_position: center
vertical_position: center
options:
content_alignment: top
infinite_scrolling: true
---
{% bookshop "{{block._bookshop_name}}" bind: block %}