Adding an Image Carousel In Smart Builder

Follow

An image carousel is a slideshow of images that your users can cycle through by either clicking backward or forward.

With the help of Unbounce Apps, add a bit of interactivity and boost your engagement by adding an Image Carousel App.

Adding an Image Carousel App

  1. Navigate to the Apps tab on the left-hand side of Smart Builder.
  2. Search and locate the Image Carousel App.
  3. Click the plus button next to Image Carousel to install the app.
  4. Once installed, the section template window will appear. Select Carousel:
    Image Carousel section tempaltes highlighted in red box in Smart Builder.
  5. The Carousel section, which includes a blank placeholder image, will appear on the page:
    A Image Carousel section within a Smart Builder page (with a grey placeholder image).

Now you can begin customizing your carousel.

Adding Images to the Carousel

  1. Single-click the Image Carousel section (where the grey-placeholder image is) to launch additional properties.
  2. Next, click the Image Properties icon that appears at the bottom of the image.
  3. A pop-up will appear. 
  4. From the Image #1 heading, click the white plus (+) button, and the Image Library will appear.
To learn more about images and image libraries in Smart Builder, see Adding Images & Videos to Smart Builder.
  1. Click any image of your choice from the library.
  2. The image will appear on the landing page.

Take a look at this demo:

Gif demo of user clicking the Image Properties Pen icon, then selecting an image from Image Library. The image will appear on the page.

Continue steps 1 through 5 to add your second, third, etc., image(s). You can also add Alt text to each image if needed.

Learn more here: Customizing Image Properties - Adding Alt Text.

Customizing to the Image Carousel

To edit the Image Carousel's speed or size, see the following.

  1. Single-click the placeholder image.
  2. Click the gear icon ; a pop-up will appear with the Settings. Here, you have a few options to edit your carousel:

A list of Settings available for the Image Carousel, after clicking the gear icon next to the image.

Carousel Height

Update the Height properties to max image height based on the section height, measured in pixels.

Delay Before Changing Slides, i.e., Carousel Speed

Adjust the allocated time before the carousel will flip to the following image. The unit of time here is milliseconds. You can test this when your Preview the carousel.

E.g., 2000 milliseconds is 2 seconds.

Auto Play

If you want visitors to click through the images themselves, toggle the Auto Play switch off.

If you want the carousel to cycle through images automatically, toggle the Auto Play switch on.

Testing your Image Carousel 

To test out your carousel, click the Preview button at the top of Smart Builder.

Here is an auto-play Image Carousel in action:

Gif demo of a live Image Carousel from the Smart Builder preview.

Be sure to Save and Publish your page when you’re happy with these changes.