Slideshow element

In this tutorial, you’ll learn about the Slideshow element and how to use it.

You can also watch this video tutorial:

About Slideshow element

Slideshow element is designed to present a series of content items in a single compact view to help increase your conversion rate. You can use the Slideshow element to display featured products, sales campaigns, customer testimonials, etc.

Access the Slideshow element

Access the Slideshow element

Step 1: Click on the Plus icon which is the Add element function

Step 2: Click on the Slideshow element in the dropdown menu

Step 3: Drag and drop the element you want into the page editor and then start using it.

The Slideshow element comes with multiple variations covering most needs. But we will continue to add more variations to help you save time.

Drag a variation to layout and see how it can be configured.

Slideshow element configuration

Slideshow element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.

In the 3.4.0 version, you are able to add all elements in the Slideshow, even the Product List element.

Select the element in the layout to see its parameters.

In this article, we’ll show the parameters of the General and Styling tabs for the Slideshow element.

General tab’s parameters

CONTENT
Slideshow height update: In the 3.4.0 version, the Slideshow Height is now automatically set based on your slide content.  For example, if you have 2 slideshows, when you view each of them, you can see the height of the slideshow is changed. However, when you turn on the “Set Max Height” option, the Slideshow Height is now automatically set based on the highest slide, which means that all the slides of the slideshow will have the same height.
Slides: Show the number of slides of a slideshow. You can duplicate, add or remove a slide.
No. Of Slide To Show: Set the number of slides display on your banner (the maximum number is the amount of Slider you have on your website)
No. Of Slide To Scroll: Set the number of slides will show up additionally after you click the navigation button (the maximum number depends on the amount of No. Of Slide To Show you’ve set above)
Gutter: Adjust the spacing between elements in each slide. The minimum is 0px; maximum is 60px
Navigation: There are 5 different styles for the left/right arrow navigation button on the slide. You can choose None and navigate between slides by clicking on the pagination. Please note that some navigation options only appear on mouseover.
Pagination: There are 3 different styles for pagination.
Height: Slide to adjust the height of the slideshow. The minimum is 100px and maximum is 1000px for the Slideshow.
Enable Auto Rewind: You will be able to return back to the first slide when you click the next button in the last slide.
Enable Autoplay: Enable / Disable autoplay of slides in the Slideshow. This works on the live page only.
If you turn on Auto Rewind and Autoplay, your slide will auto-play to the end and turn back to the first slide.
If you turn off Auto Rewind and turn on Autoplay, your slide will auto play from the beginning slide and stop in the last one.
Autoplay Speed: Adjust the speed of your slide when you turn on Enable Autoplay

You can get further information about VISIBILITY, ATTRIBUTES, ANIMATION parameters here

Styling configuration

You can check more information about the Styling tab here

Nested elements configuration

Please note that the Slideshow element is the combination of multiple slides and you can edit the name and position for each slide.

General configuration

5. VISIBILITYThis is a parameter that all elements have. You can read more here.

CONTENT
Slides: Add/remove/copy slide(s)
Name: Change the name for a specific slide
Content Position: Change the position of content
ACTION
You can embed a link into each slide to redirect your visitor to the desired location after clicking anywhere on that slide. Please visit here to get further information.
TRACKING
There are three tracking options including PageFly Events, Google Analytics, Facebook Pixel that allows you to track the number of clicks on an element and update information into your GA account. You can get further information about tracking tools here.

Styling configuration

You can check more information about the Styling tab here

Common cases with the Slideshow element

Set full-width for the Slideshow

In case you want to set full-width for the slideshow, choose the Section which contains the Slideshow and disable the Set Fixed Width option in the General tab like the image below:

You can check this article to know more details on how to create a full-width section.

Replace an image in a Slide

To replace an image in a Slide with another image, you can choose the Slide you want, then go to the Styling tab > Background Image and choose the image you want.

You can see this image below to have a better demonstration