Tab Slider Shortcode

Updated on January 3, 2018

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.

Tab Slider shortcode - demo


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:

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

Tab Slider shortcode - visual composer screen

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

Tab Slider shortcode - add element

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

Tab Slider shortcode - Tab Slider settings

5Configure the settings as required. More settings are explained in the next sections.
SettingDescription

Select Specific Tabs Choose the tab slides you have already added as a post type.
6Click on Save Changes and publish or update the page to check the result.

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.

SettingDescription

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.

SettingDescription

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.

SettingDescription

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.

Did this answer your question?