Story’s Image Slideshows

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.

The “Caramel” cup cake advertised with flexslider