Flexslider Shortcode

Last Updated on

The flexslider shortcode is one of the Jupiter shortcodes that lets you 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 flexslider shortcode.

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

x
Note: To display Flexslider items in the slider, you should create the slides at first. It can be done from the left side of your Dashboard in the FlexSlider > Add New menu. If you don’t see Flexslider menu in the dashboard, you should enable this post type in Theme Options > Advanced > Post Types.

In this article


Displaying the Flexslider 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.

Flexslider shortcode - visual composer section

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

Flexslider shortcode - add element

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

Flexslider shortcode - Flexslider settings

5
Configure the settings as required. More settings are explained in the next sections.
SettingDescription
Title  Sets the title above the slideshow.
Count Sets the number of slides you want to show.
6
Click on Save Changes and publish or update the page to check the result.

Configuring the Flexslider Settings

After you’ve added the flexslider 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 flexslider shortcode.

Showing Specific Items

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

SettingDescription
Select Specific Slides Determines specific slides. Only the selected posts will be displayed.

Configuring the Flexslider 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
Caption Background Color Sets the caption background color.
Caption Text Color Sets the caption text color.
Caption Opacity  Sets the caption opacity.
Direction Nav Sets the arrow control styles in the slideshow.
Smooth Height Allows the height of the slider to animate smoothly in horizontal mode.

Configuring the Slider Sizes

Setting Description
Height Sets the height of the slideshow.
Width Sets the width of the slideshow.

Configuring Slider Animation

Setting Description
Animation Effect Sets the animation effect for this slideshow. Available options are: Fade and Slide.
Animation Speed Sets the speed of the animation effect occurring on slide change in the slideshow. The value is in milliseconds.
Slideshow Speed Sets the speed of the slideshow on slide change. The value is in milliseconds.
Pause On Hover Pauses the slideshow when the mouse hovers over.

Altering the Images Sorting

There are two settings in the flexslider settings pop-up that allow you to alter the posts 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.

 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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket