Edge Slider Shortcode

Last Updated on

The edge slider shortcode is one of the Jupiter shortcodes that allows you to show a slideshow on your website. There are a lot of settings to help you customize the shortcode to your needs.

In this article, we’ll explain how to configure the edge slider shortcode.

To see the edge slider shortcode in action, check out the demo page.

Edge slider shortcode - demo

In this article


Creating an Edge Slider Item

Before adding the Edge Slider shortcode, edge slider items need to be created and configured. To learn how to crate an edge slider item, check out this article.


Displaying the Edge Slider Shortcode

To add the shortcode:

1
Add a new page or edit an existing page.
2
From the Visual Composer screen, click on the + button.

Edge slider shortcode - visual composer screen

3
In the Add Element pop-up screen, search for Edge Slider and click on it to be added to the page.

Edge slider shortcode - add element

4
When the shortcode is added, a new pop-up screen called Edge Slider Settings will open that allows you to configure the shortcode settings.

Edge slider shortcode - Edge slider settings

5
Configure the settings as required. More settings are explained in the next sections.
SettingDescription
First Element? If you don’t want to use the slideshow as the first element of content, then disable this option. This option is only useful when the Transparent Header style is enabled on the page. Having this option enabled will allow the header skin to follow the slide item’s header skin.
Pagination Sets the pagination dot styles in the slideshow. Available options are: Stroke, Small Dot With Stroke, and No Pagination.
Lazy Load  Turn on or off lazy load for Edge Slider shortcode, which increases the website speed.
6
Click on the Save Changes button and publish or update the page to check the result.

Configuring the Edge Slider Settings

After you’ve added the edge slider shortcode, a pop-up window will appear where you can set the options for this shortcode. Below is a detailed description of each option of the edge slider shortcode.

Showing Specific Items

There is one setting in edge slider settings pop-up that allows you to show specific slides. Type the name of the post or ID to add them to the field.

SettingDescription
Select Specific Slides Determines specific slides. Only the selected posts will be displayed. Note: only 10 slides can be selected, others won’t load on the page.
x
Note: To create Edge Slider items, you need enable Edge Slider post type in Theme Options > Advanced > Post Types and then you’ll see Edge Slider menu on the left side of WP Dashboard menu. Click on “Add new” to create a new Edge Slider item.

Configuring the Edge Slider Styling

To select the colors or change the slider sizes you’ll need to edit the following options. Each option has a description which you can find below:

SettingDescription
Slideshow Background Color Sets the slideshow background color. This option is useful for some animation types that the background section of the slide reveals.
Parallax Background?   Sets the Parallax effect for the slideshow. Click here to view the example.
Direction Nav Sets the arrow control styles in the slideshow. Available options are: Rounded Slide, Rounded, Split, Thumbnail Flip, and No Navigation.
Scroll To Bottom Arrow Enable this option in order to have an arrow at the bottom of the slide, that auto scrolls upon clicking down the page to the next section after the slider.

Configuring the Slider Height

Setting Description
Full Height? Sets the slideshow to full height. This means that it will take up the whole height of the window and you will need to scroll down to see the rest of the content of the site. If you disable this option the height of slideshow will be fixed and decided upon by the option below.
Slideshow Height Sets the height of the slideshow. This option will work if you disable the Full Height option.

Configuring the Slider Animation

Setting Description
Animation Effect Sets the animation effect for this slideshow. Available options are: Slide, Slide Vertical, Zoom, Zoom Out, Horizontal Curtain, Fade, Perspective Flip, and Kenburned.
Animation Speed Sets the speed for the animation effect upon slide change in the slideshow. The value is in milliseconds.
Pause Time Sets the pause or wait time between each slide change in the slideshow.

Altering the Images Sorting

There are two settings in the edge slider settings pop-up that allow you to alter the post sorting. By default, the Order and Orderby settings are set to Ascending and Date therefore it sorts the older posts ahead of the newer posts.

SettingDescription
Order  Sets the ascending or descending order of the Orderby parameter.
Orderby  Sorts the posts based on the selected parameter (date, menu order, title, …).
x
Note: To learn more about these settings, read the Configuring a shortcode’s sorting settings article.

Configuring the Visibility for Devices

The Visibility for Devices setting in shortcodes allows you to hide / show the shortcode for a specific screen width. This settings is useful when you need to hide / show a section of your webpage for mobile devices, for example.

x
Note: To learn more about this setting, read the Configuring the visibility for devices article.

 Adding an Extra Class Name

The Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read the Adding a custom CSS class to a shortcode article for further explanation.

 

If you have any questions regarding Edge Slider configuration, please contact our support team creating a ticket via your Artbees Dashboard.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket