The tab slider shortcode is one of the Jupiter shortcodes that allows you to show a slider with either icon or text tabs that navigate the slides.
In this article, we’ll explain how to configure the tab slider shortcode.
To see the tab slider shortcode in action, check out the demo page.
Creating Tab Sliders
Each tab slide post can be added using the Tab Sliders Menu item from sidebar dashboard menu. You can add a new tab slide by clicking the Add New Tab Slider button.
Displaying the Tab Slider Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| Select Specific Tabs | Choose the tab slides you have already added as a post type. |
Configuring the Tab Slider Settings
After you’ve added the tab slider shortcode, a pop-up window will appear where you can set the options. Below is a detailed description of each option for the tab slider shortcode.
| Setting | Description |
|---|---|
| Slideshow Speed | Sets the speed of the slideshow cycle in milliseconds. |
Configuring the Tabs Styling
To set the button’s color or size in the tab slider, you’ll need edit the following options.
| Setting | Description |
|---|---|
| Navigation Button Size | Sets the size of the icons or text that acts as navigation for your tab slider. You can use the slider or enter the number directly into the option. |
| Navigation Button Color | Sets the color of your navigation button in the tab slider. A color panel will help you to easily choose your desired color. |
Altering the Slide Sorting
There are two settings in the tab slider Settings pop-up that allow you to alter the slide sorting. By default, the Order and Orderby settings are set to Ascending and Date, therefore it sorts the older slides ahead of the newer slides.
| Setting | Description |
|---|---|
| Order | Sets the ascending or descending order of the Orderby parameter. |
| Order by | Sorts the slides based on the selected parameter (date, menu order, title, …). |
Adding an Entrance Animation
The Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll through the browser.
You can read the Configuring a shortcode’s entrance animation article for further explanation.
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 style sheet or JavaScript file.
You can read the Adding a custom CSS class to a shortcode article for further explanation.
