Create a Banner with the Carousel Layout

Learn how to create one of our most popular carousel designs: the Carousel. 

Create Carousel Banner in the Business Portal

1. Choose a wide image that you would like to use for the Super Carousel layout. Divide the image up into equal parts, each fitting a vertical, 9:16 aspect ratio. The number of parts you splice the image into should equal the number of videos you want in the Super Carousel. For example, you’ll see the image below has been spliced into five equal parts.
   
2. If you haven’t done so already, upload the videos you want to include in your Carousel to the Firework Business Portal. For help uploading a short video in the Business Portal, read the help article here.
   
3. On each of the videos you uploaded for the Super Carousel, click Edit.
4. Click the Posters header to expand the section. Upload one of the sliced segments (in no specific order) of your image as the poster.
   
5. Once you have added the poster images to your videos, create a playlist and add the videos to your playlist. See Create a Playlist in the Business Portal.
6. Navigate to your playlist in the Business Portal.
7. Drag and drop the videos in the playlist in sequence so that the posters reveal the full image.
   
8. Select the blue embed icon in the upper-right corner, and then choose Carousel as your layout selection.
9. Click Copy Code.

Customize the Desktop Experience

You can customize the viewing experience of your Carousel by editing the code before pasting it in your webpage editor. Below is an example of the code you’ll copy for your Carousel.

Note: This is only an example, so you'll want to ensure you're copying the code for your specific playlist. 

<script async type="text/javascript" src="//asset.fwcdn3.com/js/embed-feed.js"></script>

    <fw-embed-feed

      channel="FW_testchannel"

playlist="oBZ4Oo"

      mode="row"

      open_in="default"

      max_videos="0"

      placement="middle"

      player_placement="bottom-right"

                  captions="false"

                  autoplay="false"

    ></fw-embed-feed>

Turn Captions & Autoplay Off

A simple mouse hover over each tile will start the video play.

• Edit the code you copied from the Business Portal by adding autoplay="false" and captions="false", as shown in the example code above.

Captions Off, Autoplay On

The first tile autoplays to reveal videos are available to watch in the remaining tiles.

• Edit the code you copied from the Business Portal by adding captions="false", as shown in the example code above.
  

Captions On, Autoplay Off

Captions on each tile can be used to entice the viewer to click and watch the playlist.

• Edit the code you copied from the Business Portal by adding autoplay="false", as shown in the example code above.

The Carousel is best experienced on Desktop. On Mobile or in App, the posters will scroll through, like in the example below. Talk to your Firework team to decide how to best implement this design and optimize the desktop and mobile experiences to achieve the best possible engagement and conversion!