---
title: "How to create an image carousel on your site"
updated: 2026-02-18
---

# How to create an image carousel on your site

> **Notice**
>
> These instructions are for the Website Builder, which is continuously evolving based on customer feedback. Some details shown here may differ from what you see in-app.

Image carousels let you showcase multiple visuals in a single, interactive section of your website. In beehiiv, you can build an image carousel using the Website Builder and customize its layout, navigation, and styling to match your site’s design.

In this article, you’ll find a short video walkthrough followed by written step-by-step instructions. The final section covers common customization options you can use to adjust the look and behavior of your carousel.

---

## Watch and learn: How to create an image carousel in beehiiv 

[Embedded video](//www.youtube-nocookie.com/embed/-BJajFbTtcw?si=aGbr8p0xCllYMjPK)

---

## How to create an image carousel in the Website Builder

1.  Open the page where you want to add your image carousel.

-   Go to **Website >** [**Builder**](https://app.beehiiv.com/website_builder_v2), then open an [existing page or create a new one](https://www.beehiiv.com/support/article/33699539470615-using-pages-in-the-website-builder).

2.  From the left panel menu, click the **\+ icon**.

-   Under **Layout blocks**, click and drag a **Container** **block** onto your canvas.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979724822423)

For more details on using containers, refer to [our guide on how layers work](https://www.beehiiv.com/support/article/36109458207255-how-layers-work-in-the-beehiiv-website-builder).  
  
Once added, the container will appear as an empty layout section on your canvas.  
  
![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979707406871)

3.  Return to the **\+ icon** options on the left, go to **Widget blocks** and drag an **Image** block into the container you just added.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979724828439)  
    Once added, the container will display options for adding images.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979724832151) 
4.  Add your images. Navigate to the **design panel** on the right, under **Media**, click the **\+ icon** to open your [media library](https://beehiivhelp.zendesk.com/hc/en-us/articles/38353759606295).  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979707411735)  
    Alternatively, from inside the **Image block** you can click **Upload an image** to upload your image, or click **Use from library** to open your [media library](https://beehiivhelp.zendesk.com/hc/en-us/articles/38353759606295).  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979724837783)
5.  After adding your first image, click the **\+ icon** under **Media** in the design panel to add additional images to the carousel.   
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979707418903)  
    Once at least two images are added, additional carousel options will appear in the design panel under **Media** where you can adjust aspects like the layout of your images or the look of your scroll arrows.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979707420695) 

---

## Customizing your image carousel 

After your images are added, you can fine-tune how your carousel looks and behaves using the options in the right design panel.

### Manage your images

-   **Rearrange images:** Click and drag images in the design panel to change their order.
-   **Remove an image:** Click an image in the design panel to open its menu, then select the **Trash** **icon**.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979724847255)

### Select a different layout or how it behaves

Under **Media**, you can adjust how your images are displayed:

-   **Grid:** Choose between **1 or 2 columns** and set spacing between images. You can also make the first image full width.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979707425559)
-   **Horizontal scroll:** Enables carousel-style scrolling and allows you to customize pagination and navigation.
-   **Pagination options:** Choose between **Dots**, **Numbers**, or **Preview.**  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979707428503)

> **Pro Tip**
>
> Pagination helps visitors understand which image they’re viewing within the carousel.

-   **Arrow navigation:** Arrows will appear over your images on the canvas to allow your subscribers to scroll through your images.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979707434007)

Depending on your [global design settings](https://www.beehiiv.com/support/article/37870894736663-how-to-switch-your-website-template-or-theme), arrows may appear subtle or blend into the layout.

To customize arrows:

-   Click on the **color block** next to **Arrow Color**, or
-   Click on the **color block** next to **Arrow Icon Color**.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979724856855)

With the **Preview** pagination option, there will be a preview of all images underneath the selected image. This will also have give you additional options in the design panel, such as **Thumbnail Size** and **Thumbnail Radius**.   
  
![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979707442455)

### Adjust image block styling

Under **Style** in the right design panel, you can further customize the carousel’s appearance, including **Aspect Ratio**, **Padding**, **Borders**, and more.   
  
![](https://beehiivhelp.zendesk.com/hc/article_attachments/37979724864663)

---