The carousel component
A carousel is used to display images. When used with multiple images, it will cycle through them automatically or with controls, creating a slideshow.
Introduced in SQLPage v0.18.3.
Top-level parameters
auto
Whether to automatically cycle through the carousel items. Default is false.
center
Whether to center the carousel.
class
class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.
controls
Whether to show the control links to go previous or next item.
fade
Whether to apply the fading effect.
id
id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).
indicators
Style of image indicators (square or dot).
title
A name to display at the top of the carousel.
vertical
Whether to use the vertical image indicators.
width
Width of the component, between 1 and 12. Default is 12.
Row-level parameters
image
REQUIRED. The URL (absolute or relative) of an image to display in the carousel.
description
A short paragraph.
description_md
A short paragraph formatted using markdown.
title
Add caption to the slide.
Example 1
A basic example of carousel
select
'carousel' as component,
'cats1' as name,
'Famous Database Animals' as title;
select
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Elefantes_africanos_de_sabana_%28Loxodonta_africana%29%2C_Elephant_Sands%2C_Botsuana%2C_2018-07-28%2C_DD_114-117_PAN.jpg/2560px-Elefantes_africanos_de_sabana_%28Loxodonta_africana%29%2C_Elephant_Sands%2C_Botsuana%2C_2018-07-28%2C_DD_114-117_PAN.jpg' as image;
select
'https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Penguin_Island_panorama_with_ferry_and_dolphins_in_foreground%2C_March_2023_06.jpg/1280px-Penguin_Island_panorama_with_ferry_and_dolphins_in_foreground%2C_March_2023_06.jpg' as image;Result
Famous Database Animals
Example 2
An advanced example of carousel with controls
select
'carousel' as component,
'Cats' as title,
6 as width,
TRUE as center,
TRUE as controls,
TRUE as auto;
select
'https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Cat_Sphynx._Kittens._img_11.jpg/1024px-Cat_Sphynx._Kittens._img_11.jpg' as image,
'A first cat' as title,
'The cat (Felis catus), commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae.' as description;
select
'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Cat_close-up_2004_b.jpg/1280px-Cat_close-up_2004_b.jpg' as image,
'Another cat' as title;Result
Cats
A first cat
The cat (Felis catus), commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae.
