> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/media-and-layout/carousel.md).

# Carousel

The carousel section allows you to showcase images or videos in a rotating display, perfect for delivering key messages or promotions with high visual impact.

<figure><img src="https://3867724846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5cjsG9gBFSIZ5CisPtcx%2Fuploads%2F6bb5oQaJ4nnmJrmBiMP5%2Ffd1eed815ca02e5f1118de0c5662066.png?alt=media&amp;token=196b227e-7613-4128-8081-958fdfa165ac" alt=""><figcaption></figcaption></figure>

### 🧱 Section Content Settings

**🔄 Full Width Option**

Enable to make the carousel span the full width of the page — ideal for immersive designs.

**📏 Image Height Options**

* Auto
* Small
* Medium
* Large

Choose based on your image dimensions and design preference.

***

### 🎞️ Carousel Settings

* **Carousel Type**: Slide, Fade, or Zoom
* **Show Navigation Buttons (Desktop)**: Option to display buttons on either *sides* or *bottom right*
* **Show Pagination Dots**: Displays dots indicating the current slide
* **Enable Auto-Play**: Automatically rotates through carousel items
* **Auto-Play Speed**: Set the interval using a slider (in seconds)

***

### 📸 Image Slide Settings

* **Upload Image**: Recommended size: 1800 x 800px\
  (Use auto height to ensure full display without cropping)
* **Image Overlay Opacity**: Adjust the overlay’s transparency from 0%–100%

**🧩 Content Settings**

* **Color Scheme**: Choose a unique style for text and buttons in this slide
* **Position**: Define the alignment (e.g., Bottom Center)
* **Enable Container**: Display a content box over the image for text or buttons
* **Content Box Opacity**: Adjust background opacity for better readability
* **Enable Blur Effect**: Apply a blur background to the content box to enhance text visibility

**🔧 Available Blocks:**

Badge group, button, button group, countdown, description, discount code, follow us, heading, key metrics, icon, icon with text, keywords, link group, social icons, subheading, video button, spacer

***

### 🎬 Video Slide Settings

* **Upload Video**: Recommended duration: 10–15 seconds for optimal performance\
  (Use auto height to prevent cropping)
* **Video Overlay Opacity**: Adjust the overlay’s transparency from 0%–100%

**🧩 Content Settings**

Same as image slide: color scheme, content position, container with optional blur effect

**🔧 Available Blocks:**

Badge group, button, button group, countdown, description, discount code, follow us, heading, key metrics, icon, icon with text, keywords, link group, social icons, subheading, video button, spacer

***

### ✅ Usage Tips

* Use consistent image dimensions (e.g., 1800×800px) to avoid layout shifting
* Limit video length to 10–15 seconds to ensure smooth loading
* Enable container + blur background to ensure text stands out
* Use auto image height and overlay to improve visual balance
* Ideal to use 3–5 slides for best performance and user experience