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.
Displaying the Flexslider Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| Title | Sets the title above the slideshow. |
| Count | Sets the number of slides you want to show. |
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.
| Setting | Description |
|---|---|
| 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:
| Setting | Description |
|---|---|
| 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.
| 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 style sheet or JavaScript file.
You can read the Adding a custom CSS class to a shortcode article for further explanation.
