The edge one pager shortcode is one of the Jupiter shortcodes that allows you to show your slides separately in full height, and on a vertical axis using the One Pager mode of EdgeSlider.
In this article, we’ll explain how to configure the edge one pager shortcode.
To see the edge one pager shortcode in action, check out the demo page.
Displaying the Edge One Pager Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| Select Specific Slides | You can add the slides you already created using the Edge Slideshow menu item here. Just click on the selection box and search for the name of your desired slide. You can add as many slides as you’d like, but we recommend to keep this limited so there will be no impact on your website speed. More slides means more images and media to load which will make your website slower. |
Configuring the Edge One Pager Settings
After you’ve added the edge one pager shortcode, a pop-up window will appear where you can set options for this shortcode. Below is a detailed description of each option of the edge one pager shortcode.
| Setting | Description |
|---|---|
| Pagination | Determines the pagination mode. If you select the Stroke option you will get no navigation dots, and the slide change will occur upon scrolling. If you select Small Dot With Stroke you will have navigation dots on the right side of the screen, as well as the ability to change slides by scrolling. Available options are: Stroke and Small Dot With Stroke. |
Altering the Images Sorting
There are two settings in the edge one pager settings pop-up which 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.
| Setting | Description |
|---|---|
| Order | Sets the ascending or descending order of the Orderby parameter. |
| Orderby | Sorts the posts based on the selected parameter (date, menu order, title, …). |
Adding an Extra Class Name
The Extra Class Name field in the settings 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 stylesheet or JavaScript file.
You can read the Adding a custom CSS class to a shortcode article for further explanation.
