Image Carousel | SP Page Builder (Pro) - Documentation | JoomShaper

SP Page Builder (Pro)

Updated Last: 23 April 2024

Image Carousel

SP Page Builder’s Image Carousel addon will let you display your images smartly on your website. It will help you create a gorgeous image gallery easily. You can take full control over the carousel design with easy settings. 

You can add the Image Carousel addon to your page from the SP Page Builder sidebar. Simply drag the addon from the Addons panel and drop it on the section of the page where you want to add the Image Carousel.

The addon inline editor will open up when you click on the Image Carousel addon. You can access the addon settings here and customize the addon to fit your needs. 

Options

SP Page Builder 4.0

Carousel Height: Use the slider or the input field to define the height of the carousel. 

Gap: Use the slider or the input field to set the gap between carousel items. 

Center Mode Padding: Use the slider or the input field to set the padding of the center image. 

Vertical Alignment: Set the vertical alignment of the carousel to the top, bottom, or middle.

Horizontal Alignment: Set the horizontal alignment of the carousel to the top, bottom, or middle.

Animation

SP Page Builder 4.0

Autoplay: Enable autoplay to slide to the next item in the carousel. 

Speed: Set the speed at which elements in a Carousel will slide to the next. 

Interval: Set the interval after which elements in a Carousel will slide to the next.

SP Page Builder 4.0

 

You can showcase your image carousel in 4 different layouts. Select your desired carousel layout and customize it your way. 4 of these carousel layouts vary on the basis of their image positioning. Each of these layouts is unique and has its own design needs.

Click on the settings icon on the inline editor to access the item customization settings of the addon. 

SP Page Builder 4.0

Item Title: Use the text field to add a title to the carousel item.

Subtitle: Use the text field to add a subtitle to define the carousel item. 

Item Description: Use the text field to add the description of the carousel item. 

Carousel Image: Use the upload option to upload the carousel image item. 

Add Link to Item: You can either link the carousel item to an external URL, a menu, or a page. 

Controller Settings

Bullet Controller: Enable to show Bullets to slide the next item in the carousel. You can customize the position, width, height, color, border, and more of the bullet controller from the settings. 

Arrows: Enable to show arrows that point left and right to slide to the next item in the carousel. You can customize the position, width, height, color, border, and more of the arrow controller from the settings.