---
title: "Carousel"
canonical: "https://docs.pbs.org/space/B3/4751633/Carousel"
format: markdown
---
> Macro (toc)
## Overview
The Carousel component provides a way to display large carousel images containing text to highlight your site's most popular content. Each slide links to a URL from the slide title, call to action, and carousel image. There are [three different carousel styles](https://docs.pbs.org/space/B3/4751633/Carousel#Carousel-types) from which you can choose and all content can be added manually from your [filer folders](https://docs.pbs.org/space/B3/4751570/Filer+Folders) or by adding a [Media Manager asset](https://docs.pbs.org/space/B3/4751468/Video#How-to-add-a-Media-Manager-video). All fields can be edited.
[View a quick guide](https://static.pbslearningmedia.org/media/help/Bento+3+Hero+Carousel+Component+Guide.pdf)
## Display
When viewing your carousel on a desktop, users can scroll through each hero image by clicking **left and right facing arrows** that appear when their mouse hovers over the image, or by clicking the **small dots** in the lower center section of the image. On mobile devices, users can scroll through images by **swiping the screen**.
## Carousel types
There are three carousel types from which you can choose. You cannot mix and match carousel types with each individual slide; the carousel type you assign to the last slide that you save is the type that your entire carousel adopts.
Below are examples of each type of carousel.
| Type | Description | Example |
| --- | --- | --- |
| Circle Crop | A curved, circle crop image that aligns with PBS.org rebrand. Includes a title, optional logo, description, and call to action. The title, call to action, and carousel image can be linked. All three elements share the same URL so you only need to add a URL to one of the elements and all adopt the same URL.
**[See examples and specs here](https://static.pbslearningmedia.org/media/help/Bento+3+Hero+Carousel+Component+Guide.pdf)** |  |
| Full-size | A full size image that can span the entire width or partial width of your site. Includes a title, optional logo, description, and call to action. The title, call to action, and carousel image can be linked. All three elements share the same URL so you only need to add a URL to one of the elements and all adopt the same URL. |  |
| Regular | Full-width image with the title and short description below. There is no logo or call to action option. To view the associated asset, the user must click the title. |  |
## Image sizes
> ⚠️ **If adding your own image, do not include baked-in text on the image. ****[View the best practices guide](https://static.pbslearningmedia.org/media/help/Bento+3+Hero+Carousel+Component+Guide.pdf)**
| **Image** | **Size** |
| --- | --- |
| Circle Crop & Full-size carousels (not Full-width image) | - Aspect ratio: 7/4
- Minimum size: 768 pixels wide by 442 pixels high
- Logo: 4:1 aspect ratio
- Logo maximum width: 300 pixels
- **[See Circle Crop examples and specs here](https://static.pbslearningmedia.org/media/help/Bento+3+Hero+Carousel+Component+Guide.pdf)** |
| Full-size carousels with Full-width image | - Aspect ratio: 20:7
- Minimum size: 1280 pixels wide by 442 pixels high |
| Regular Carousel | Maximum height: 442 pixels |
## Variables
| **Variable** | **Definition** |
| --- | --- |
| Title | The title of your carousel slide. Can be hyperlinked. |
| Call to Action | Clickable text that should elicit an action from the user. For example, "Learn more," "Watch episode," or "View program schedule." |
| Description | Text that is unique to each hero image and should be descriptive of what the image represents. |
| Image | The carousel image. Images can be added from your [filer folders](https://docs.pbs.org/space/B3/4751570/Filer+Folders) or can be pulled from a Media Manager asset. |
| Link | A URL that is unique to each carousel image and is associated with the logo, description, and call to action text. |
| Logo | The logo displays on the left side of the carousel image and can be hyperlinked. |
| Background style | Adds a filler around the hero image on screens that are larger than 1440. Choices are blur, light, and dark. |
## How to implement the Carousel
All three versions of the Carousel component are added to your page in the same way. After you have added the component, you can then select which [type of carousel](https://docs.pbs.org/space/B3/4751633/Carousel#Carousel-types) you'd like to use.
- In a block of the content section of your website (not the header or footer), click the **plus sign** to add a component (Figure 1.1).
- In the *Galleries* section, click** carousel** (Figure 1.2).
Figure 1
- Hover your mouse over the carousel placeholder and click the **component settings icon** located in the upper right side of the component (Figure 2). This brings up the settings for your carousel component.
Figure 2
- All of the carousel settings display on the left side of the page. Click the **radio button** to the left of the [type of carousel](https://docs.pbs.org/space/B3/4751633/Carousel#Carousel-types) you want to add to your page (Figure 3). Each carousel type has its own unique settings.
Figure 3
### Circle Crop
**[See examples and specs here](https://static.pbslearningmedia.org/media/help/Bento+3+Hero+Carousel+Component+Guide.pdf)**
The Circle Crop carousel allows a maximum of five slides and aligns with the PBS rebrand. The following elements are available:
- Up to five slides
- A carousel image from your filer folders or an asset from Media Manager
- Logo
- Title
- Full Description
- Call to Action
#### How to add the Circle Crop carousel
After you've selected the Circle Crop carousel by clicking the** radio button** next to Circle Crop in the *Carousel Type* section, you can start adding content.
- Hover your mouse over the placeholder image and click **Choose Asset** (Figure 1).
Figure 1
- At the top of the window, click **one of the two options** available for retrieving your carousel content (Figure 2):
- **Site Files**: Upload an image from your filer folders ([learn more about filer folders](https://docs.pbs.org/space/B3/4751570/Filer+Folders))
- **Media Manager**: Upload an asset from [Media Manager](https://docs.pbs.org/space/MM/5341192/Media+Manager). You must have access to Media Manager in order to use this option. [Submit a support ticket to request access](https://digitalsupport.pbs.org/support/tickets/new)
** In this example, we are searching for a Media Manager asset.*
Figure 2
- Search for an asset by typing **keywords** into the textbox upper left side of the screen and clicking **Search** (Figure 3.1).
- Click the **Object Type dropdown menu** and click the **type of asset** for which you want to search (Figure 3.2).
Figure 3
- When results display, click the **radio button to the left of the asset** you want to use (Figure 4.1).
- Click **Add selected** (Figure 4.2).
Figure 4
- Edit the item as follows (Figure 5):
- Click the **title**, **description**, and **call to action text** and begin typing over the existing text.
- Hyperlink the title or call to action text to an external URL, a page on your Bento site, or a file from your filer folder by hovering over the text and clicking the** link icon**.
- Hyperlink the carousel image by clicking the **image** then the** link icon** in the upper right corner of the image. Provide the URL to the page that users should go to when they click any of the three linkable elements. Each carousel slide can be associated with its own unique link but the title, call to action, and image all share the same URL.
> ⚠️ **The image, title, and call to action link to the same URL. When you type a URL into one of the elements, the other two adopt that same URL. The image, title, and call to action cannot contain unique URLs.**
Figure 5
(*Click the image to expand*)
- In the settings section, to the right of the *Logo* section, click the **toggle** so that it displays **OFF** if you do not want to display a logo on your carousel image (Figure 6.1). If the toggle displays **ON**, the logo appears as an overlay on your carousel image. The logo appears above the title of your asset and should be representative of your program.
- If the logo is activated:
- Click the **radio button** to the left of the platforms on which you want your carousel to be visible (Figure 6.2).
- Display only at Mobile - your carousel will only be visible on mobile devices such as tablets and phones
- Display only at Desktop - your carousel will only be visible on desktop computers
- Display at Mobile and Desktop - your carousel will be visible on all platforms
- Hover over the logo placeholder on the carousel and click **Upload Logo** to search your computer for the logo you want to use (Figure 6.3).
- To the right of the *Title *section, click the **toggle** so that it displays **OFF** if you do not want to display a title on your carousel image (Figure 6.4). If the toggle displays ON, the title appears as an overlay on your carousel image.
- If the title is activated:
- Click the **radio button** to the left of the platforms on which you want your carousel to be visible (Figure 6.4).
- Display only at Mobile - your carousel will only be visible on mobile devices such as tablets and phones
- Display only at Desktop - your carousel will only be visible on desktop computers
- Display at Mobile and Desktop - your carousel will be visible on all platforms
- Click the** title** located on the carousel and begin making modifications (Figure 6.6).
Figure 6
- In the Logo Alternate text, type **text that is descriptive of your logo** (Figure 7.1). For example, if you are including a logo from a show called "My Station's Best Show Ever," type "My Station's Best Show Ever logo" in the textbox. This is useful for screen readers and SEO.
- In the Image Alternate text, type **text that is descriptive of your carousel image** (Figure 7.2). For example, if you are including an image of the cast from "My Station's Best Show Ever," type "My Station's Best Show Ever cast members" in the textbox.
Figure 7
- Click **Add Slide** in the blue bar at the top to add additional slides (up to five) and follow the steps above (Figure 8).
Figure 8
- After you've created all of your slides, save the page and click **Preview** to view the page in a browser (Figure 9).
Figure 9
### Full-size
The Full-size carousel allows a maximum of seven slides and offers the following elements:
- Up to seven slides
- A carousel image from your filer folders or an asset from Media Manager
- Logo
- Title
- Short Description
- Call to Action
The Full-size carousel comes with the following options:
| **Style** | **Description** | **Example** |
| --- | --- | --- |
| Carousel Background Style | Assigns a shade/blur to the left side of your carousel image when the full-width image is not activated. This option is not visible when the full-width image is enabled.
Options:
- Blur
- Light
- Dark | **Blur:**
**Light:**
**Dark:**
 |
| Full-width Image | Displays the carousel image across the entire width of the carousel. The toggle must display ON to activate this. When activated, the title, description, and call to action text is overlaid on the image.
*****When using this feature, be sure the image that displays beneath the overlaid content is not busy to ensure the text is readable.*** |  |
| Details Style | Displays the Title, Description, and Call to Action text in PBS Blue or white.
This option is available except when using the Dark or Light Carousel Background Style with the Full-width Image disabled.
- Dark - Title and call to action displays in PBS Blue
- Light - Title and call to action displays in white | **Light:**
 |
#### How to add the Full-size carousel
After you've selected the Full-size carousel by clicking the** radio button** next to Full-size in the *Carousel Type* section, you can start adding content.
- Hover your mouse over the carousel placeholder image and in the upper right corner, click **Choose Asset** (Figure 1):
- **Upload image** - upload an image from your filer folders ([learn more about filer folders](https://docs.pbs.org/space/B3/4751570/Filer+Folders))
- **Add from Media Manager** - upload an asset from Media Manager. You must have access to [Media Manager](https://docs.pbs.org/space/MM/5341192/Media+Manager) in order to use this option. [Submit a support ticket to request access](https://digitalsupport.pbs.org/support/tickets/new)
* *In this example we are adding a Media Manager object.*
Figure 1
- At the top of the window, click **one of the two options** available for retrieving your carousel content (Figure 2):
- **Site Files**: Upload an image from your filer folders ([learn more about filer folders](https://docs.pbs.org/space/B3/4751570/Filer+Folders))
- **Media Manager**: Upload an asset from [Media Manager](https://docs.pbs.org/space/MM/5341192/Media+Manager). You must have access to Media Manager in order to use this option. [Submit a support ticket to request access](https://digitalsupport.pbs.org/support/tickets/new)
- To search for an asset by keyword, type the **keywords** in the textbox at the top of the page and click **Search** (Figure 2.2).
- Click the **Object Type dropdown menu** and click **Web Objects** or **Videos **(Figure 2.3).
- When results display, click the** radio button** to the left of the title of the asset you want to add (Figure 2.4).
- When finish, click **Add selected** (Figure 2.5).
Figure 2
- To add a logo from your filer folder, hover your mouse over the logo placeholder and click **Choose Asset** (Figure 3).
Figure 3
- As in Figure 2, click** Site Files** to use an image from your filer folders or **Media Manager** to get use a Media Manager asset (Figure 4).
- When you've located the image you want to use, click** the file **to select it (Figure 4.1).
- Click** Add selected** (Figure 4.2).
Figure 4
- Click the **radio button next to the platforms** on which you want your logo and title to display (Figure 5.1). Clicking the **toggle to the right of the Logo and Title sections** so that it displays ***OFF**** *will hide those elements and they will not display on your page.
- In the Logo Alternate Text and Image Alternate Text textboxes, type** descriptive text of your logo and carousel image** (Figure 5.2). This is helpful for screen readers and SEO.
- Click** Add Slide** to add your next carousel slide (Figure 5.3).
Figure 5
### Regular
After you've selected the Regular carousel by clicking the radio button next to Regular in the* Carousel Type* section, go to the Settings section to start selecting what you want to display on your carousel. You can display a logo and a title in addition to the short description and call to action text. If adding an asset from Media Manager, the title and description are populated.
- The title and short description textboxes are located at the bottom of the carousel slide (Figure 1.1).
- Hover over the placeholder image and, in the upper right hand corner, click **Choose Asset **(Figure 1.2).
Figure 1
- At the top of the window, click **one of the two options** available for retrieving your carousel content (Figure 2):
- **Site Files**: Upload an image from your filer folders ([learn more about filer folders](https://docs.pbs.org/space/B3/4751570/Filer+Folders))
- **Media Manager**: Upload an asset from [Media Manager](https://docs.pbs.org/space/MM/5341192/Media+Manager). You must have access to Media Manager in order to use this option. [Submit a support ticket to request access](https://digitalsupport.pbs.org/support/tickets/new)
- In this example we are clicking **Site Files** to add a file from our filer folders (Figure 2.1).
- If the file you want to use has not yet been uploaded to a filer folder, click **Upload** to upload the file (Figure 2.2).
- Click the** file** you want to add (Figure 2.3).
- When finish, click **Add selected** (Figure 2.4).
** In this example we are uploading an image from our filer folders.*
Figure 2
- If the component settings are not displaying, click the cog icon in the upper right side of the component (Figure 3.1).
- In the Settings section on the left, in the* Image Alternative Text *textbox, type a **descriptive phrase** of your carousel image (Figure 3.2).
- In the Title and Short Description textboxes, type the **title of your carousel slide** and** **a **short description of the content **(Figure 3.3).
- Click the **carousel image **or the **title **to display the** link icon** and link your carousel slide (Figure 3.4). **The image, title, and call to action areas all link to the same URL. When you type a URL into one of the elements, the other two adopt that same URL. The image, title, and call to action cannot contain unique URLs.**
- Click **Add Slide** to add your next slide (Figure 3.5).
> ℹ️ *When adding a Media Manager asset, the image, title and short description are typically pre-populated but can be modified.*
Figure 3
- When linking, you can link to an external web page (External Link), a page on your Bento site (Page), or a file from your filer folders (Filer) (Figure 4.1).
- Open the link in a new window by clicking the** toggle** in* Open in new window* section so that it displays ***ON*** (Figure 4.2).
- When finished, click **Save** (Figure 4.3).
Figure 4
- After you've created all of your slides, save the page and click **Preview** to view the page in a browser (Figure 5).
Figure 5
- The carousel displays on your site.
- Slides can be advanced by clicking the **left and right-facing arrows** on the sides of the carousel image (Figure 6.1) or by clicking the **white dots located at the bottom center** of the carousel image (Figure 6.2).
- The carousel animation can be started or stopped by clicking the **icon in the bottom right side** of the carousel image (Figure 6.3).
- If the content is linked, the user can click the image or title to access the linked content.
Figure 6
## How to rearrange carousel slides
Your carousel slides can be rearranged at any time.
- When you are in the console, hover your mouse over the **thumbnail of the slide** you want to rearrange.
- A patterned grid block and a trashcan icon display in the top right section of the thumbnail image.
- Click the **patterned block** and drag the** thumbnail image** to its new position.
- When the thumbnail image is in its new position, release your mouse.
- The carousel images are in the new order. Just save the page.
*Click video to enlarge*
## How to delete a slide
- Hover your mouse over the **thumbnail of the slide you want to delete** and click the** trashcan icon** (Figure 1). The slide is deleted.
> ⚠️ **Be very careful when deleting slides. Once you click the trashcan icon, the slide is gone and cannot be recovered.**
Figure 1
