Adding an Image Carousel In Smart Builder

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:
   
5. The Carousel section, which includes a blank placeholder image, will appear on the page:
   

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. The Image Properties settings will appear. 
4. Under the Image #1 heading, click the white plus (+) button, and the Image Library will appear.

5. Click any image of your choice from the library.
6. The image will appear on the landing page.

Take a look at this demo:

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 ; the Settings window will appear. Here, you have a few options to edit your carousel:

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 your carousel, click the Preview button at the top of Smart Builder.

Here is an auto-play Image Carousel in action:

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