This article is a demo of Story’s image slideshows feature based on FlexSlider2.
Easily integate a slideshow
You can easily integrate pictures slideshow with the flexslider
shortcode.
Before you begin, make sure you enable the flexslider feature by adding the following class to your article’s front matter:
---
classes:
- feature-flexslider
---
Note: It is important to note here that you MUST add the feature. Story will know that it has to add the appropriate class to images list under the flexslider.
If you don’t add the feature, then the shortcode alone will not work.
From there the flexslider
shortcode can be used with a list of images as
illustrated below:
{{< flexslider >}}
- ![](kitchen_adventurer_cheesecake_brownie.jpg)
- ![](kitchen_adventurer_donut.jpg)
{{< /flexslider >}}
This will be rendered into the following slideshow:
Images With Captions
The flexslider
shortcode is compatible with Story’s fig-caption
feature
and will render the caption as you would expect.
The code below exhibits this behaviour:
{{< flexslider >}}
- ![Cheesecake Brownie](kitchen_adventurer_cheesecake_brownie.jpg)
- ![Lemon](kitchen_adventurer_lemon.jpg)
- ![Donut](kitchen_adventurer_donut.jpg)
- ![](kitchen_adventurer_caramel.jpg)
_The "Caramel" cup cake advertised with flexslider_
{{< /flexslider >}}
The above snippet will be rendered as shown below. It will also advertise
flexslider
shortcode’s ability of rendering multiple slideshows in a
single page: you can use the as many times as needed.
Read next: Story’s image formatting features.