Sliders have always been one of the most attractive features of any website. There’s a Carousel addon to rotate images radially, a Gallery addon to showcase multiple images elegantly, and then there is SP Page Builder’s Slideshow addon to redefine how to use sliders on a website.

How to Add a Slideshow Addon?

You can add the Slideshow 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 Team Carousel.

Slideshow Settings

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

Slider Items: Click on the +Add Item to add new items to the slideshow. 

General Slider Items Settings

Select Content Container: You can set the content container to either Bootstrap or Custom. 

Custom Container Width: If you select custom, use the slider or the input field to set the content container width. 

Slider Content Vertically Center: Enable to set the position of the content on the slider in the center. 

Edit Slider Item’s Background

You can either set the background of the slider to an image or a video. 

Image: Use the upload option to add an image to the background.

Video: For video, you can either upload a video or insert a YouTube video link. 

You can also customize the color overlay and gradient overlay of the background. To know more about color customization, read here. 

Edit Slider Item’s Content 

Here, you’ll find the settings to configure the content of the slider. You’ll find the following tabs under this section:

• Content 
• Animation 
• Style

Content

Content Type: Select the content type from the drop-down list. You have the following options:

• Title
• Text
• Image
• Button
• Icon

Each content has its own specific settings from which you can customize the content. 

Animation

The Slideshow addon comes with 4 predefined animation types for a slider. Choosing one will give you access to make modifications. You get the following options:

• Slide
• Rotate 
• Text Animate
• Zoom

Style

Customizer the text color, background color, typography, and more from the style section. 

Item Content Options

When you want to take full control over how to fit your slider's inner contents properly, then you need something more advanced like grid controlling. Here you can define how many grids you want to allocate for that specific content. You can also swap between content placements using the Reverse option. 

Show Caption Image in Column: Enable if you want to display the caption on the image to the right instead of the center.

Reverse Caption Image Column: Enable if you want to display the caption on the image to the left of the image.

Slider Image Alignment: Set the Slider image alignment to left, right, or center.

Slider Content Alignment: Set the Slider content alignment to left, right, or center.

Slider Global Settings

Slider Height: You can set the slider height to window height or custom. For custom, use the slider or the input field to specify the height of the slider. 

Slider Animation Style: Select the slider animation from the drop-down list. You can select from the following options:

• Slide
• Stack
• Clip
• Bubble 
• Fade 
• 3D

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

Interval: Set the time interval in which elements in the slider will slide to the next. 

Sliding Speed: Set the speed at which elements in the slider will slide to the next. 

Slider Controller Settings

The addon comes with 2 different types of slider controllers: Bullet/Line controller and Arrow Controller. You can make your own style for each of these controller types. Customize their position, enable/disable the indicator, and choose a style from the predefined ones. 

Bullet/Line Controller

The bullet/line controller comes with 4 different types of slider controllers: Bullet, Line, Image Thumbnail, and Text Thumbnail. You can customize the position, width, height, color, and more of the controllers. 

Arrow Controller

The Arrow controller comes with even more versatility. There are 2 arrow styles, 4 content styles, content modification, and dedicated styling features for both normal and hover states.

You can customize the position, width, height, color, and more of the controllers.