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
| name | required | type | description |
|---|---|---|---|
| auto | BOOLEAN |
Whether to automatically cycle through the carousel items. Default is false. | |
| center | BOOLEAN |
Whether to center the carousel. | |
| class | TEXT |
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 | BOOLEAN |
Whether to show the control links to go previous or next item. | |
| fade | BOOLEAN |
Whether to apply the fading effect. | |
| id | TEXT |
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 | TEXT |
Style of image indicators (square or dot). | |
| title | TEXT |
A name to display at the top of the carousel. | |
| vertical | BOOLEAN |
Whether to use the vertical image indicators. | |
| width | INTEGER |
Width of the component, between 1 and 12. Default is 12. |
Row-level parameters
| name | required | type | description |
|---|---|---|---|
| image | REQUIRED | URL |
The URL (absolute or relative) of an image to display in the carousel. |
| description | TEXT |
A short paragraph. | |
| description_md | TEXT |
A short paragraph formatted using markdown. | |
| height | INTEGER |
The height of the image, in pixels. | |
| title | TEXT |
Add caption to the slide. | |
| width | INTEGER |
The width of the image, in pixels. |
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,
'SQL web apps' as title,
6 as width,
TRUE as center,
TRUE as controls,
TRUE as auto;
select
'/sqlpage_cover_image.webp' as image,
'SQLPage is modern' as title,
'Built by engineers who have built so many web applications the old way, they decided they just wouldn''t anymore.' as description,
512 as height;
select
'/sqlpage_illustration_alien.webp' as image,
'SQLPage is easy' as title,
'SQLPage connects to your database, then it turns your SQL queries into nice websites.' as description,
512 as height;Result
SQL web apps
SQLPage is modern
Built by engineers who have built so many web applications the old way, they decided they just wouldn't anymore.
SQLPage is easy
SQLPage connects to your database, then it turns your SQL queries into nice websites.