Carousel Layout Demonstration

This page shows how the carousel shortcode behaves in different layouts. All examples use the same shortcode but different layout values.

✅ 1. Full Width Carousel (Default)

This text appears below the carousel because full width layout does not float.

You can write normal Markdown here:

• Bullet item one
• Bullet item two
• Bullet item three

2. Carousel on the LEFT (Text flows on the right)

2.1 Left Aligned Carousel

This paragraph automatically flows on the right side of the carousel on larger screens.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This paragraph automatically flows on the right side of the carousel on larger screens.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

You can add:

• Markdown lists
• Bold text
• Italic text
• Links: Hugo

More paragraphs will continue wrapping beside the carousel until the content naturally clears.

You can add:

• Markdown lists
• Bold text
• Italic text
• Links: Hugo

More paragraphs will continue wrapping beside the carousel until the content naturally clears.

✅ 3. Carousel on the RIGHT (Text flows on the left)

Right Aligned Carousel

This text flows on the left side of the carousel.

You can write long content here and it will automatically wrap correctly around the carousel using Bootstrap float utilities.

Example content:

1. Step one
2. Step two
3. Step three

Here is a small code block:

Hello from Hugo!
This is just demo text.