[bug] Carousel Component - Autoplay doesnt work when embedded into a card

[accforgithubtest]

Introduction

I have a carousel component defined in its own sql file, which is embedded into a card using _sqlpage_embed.
Autoplay works when carousel component is its own independent page.

Autoplay in carousel doesn't work when embedded into a card using _sqlpage_embed.

To Reproduce

List of steps to reproduce the behavior.

• MariaDB database connection.
• SQLPage via docker (vanilla set-up)

carousel.sql

select 
    'carousel' as component,
    12 as width,
    true as fade,
    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;

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;

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;

cards.sql

select 
	'card' as component;

select 
	'carousel.sql?_sqlpage_embed' as embed,
	8 as width,
	0 as margin;

Actual behavior

Autoplay in carousel doesn't work when embedded into a card using _sqlpage_embed, when opening the cards.sql url.

Expected behavior

Carousel will Autoplay the photos when embedded into the card.sql url.

Version information

• OS: Docker latest on Ubuntu 22.04 LTS
• Database: MariaDB latest (using docker)
• SQLPage Version : v0.29.0

[lovasoa]

fixed. thanks for reporting 👍

[accforgithubtest]

Thank you for the fix @lovasoa , this works in the _sqlpage_embed mode.

I have just realized that I need control over height of the images for vertical images, and height is only supported in the iframe embed mode.

When adding the below to the same example, I see that the embedded card displays the images as a vertical scroll, and not auto playing them. Also the indicators are displayed on the top left corner of the image (not bottom center as expected)

'iframe' as embed_mode,
730 as height,

Does the iframe embed mode needs a different fix ?
Pls let me know if I am missing any extra steps. The only thing I have done is to add the above line for embed mode and specify a height.

[accforgithubtest]

To add to above, I think this is what is happening -

1. The default embed works well as expected with auto play, only issue is I have no way to control the height.

select 
	'carousel.sql?_sqlpage_embed' as embed,
	8 as width;

2. The iframe embed mode allows me to control height and auto play works as well, however I see lots of wasted space (I guess the header / title and default footer). Also since the carousel.sql does not have shell defined, this is not following the theme. So I gain access to controlling the height, but multiple other issues make it not ideal solution.

select 
	'carousel.sql' as embed,
	'iframe' as embed_mode,
        730 as height;

3. The ideal solution would be to use the iframe mode, along with ?_sqlpage_embed (to remove the shell, follow the theme, avoid wasted space and remove the default footer), and provide height controls.
   However, this doesn't work, it renders the photos as a vertical scrolling list, and autoplay doesn't work and indicators are in wrong place, the right/left arrow controls are not rendered.

select 
	'carousel.sql?_sqlpage_embed' as embed,
	'iframe' as embed_mode,
        730 as height;

Is this possible ?

[lovasoa]

Iframes are best to embed external websites. But it looks like what you need is a height attribute on the carousel component itself, which would indeed be useful when displaying pictures of different aspect ratios.

[accforgithubtest]

Thanks for the reply @lovasoa !

Indeed a height attribute on carousel and/or card component would be greatly useful, if that could be implemented in a future release.