Photo slider

A simple interactive template to compare two pictures.

Updated 2 months ago to v2.0.0 by Flourish team

How to use this template

Photo slider

A simple interactive template to compare two pictures.

Data requirements

Two pictures with the same aspect ratio.

Credits and feedback

Created by Flourish. Want to see additional features? Let us know at support@flourish.studio.

This section documents API usage specific to this template, so for an introduction we suggest you refer to the generic API documentation instead.

template: @flourish/photo-slider

version: 2

Template data

This template does not have any data bindings, so you shouldn't include data or bindings key/value pairs in your opts object that is passed to the API. You should specify the template and template version in the opts object like:

{
    template: "@flourish/photo-slider",
    version: "2",
    ...
}

Template settings

Options for opts.state.

Photos

mode string

Before/after mode.

Allowed values:

  • slide (Slide)
  • fade (Fade)
  • spotlight (Spotlight)

spotlight_size number

Spotlight Size.

spotlight_speed number

Spotlight animation. Time it takes to animate from one spotlight position to another in the story player

photo_1_big url

has_photo_1_small boolean

Add smaller version for mobile. (Optional) Mobile versions will be loaded quicker on smaller screens

photo_1_small url

Photo 1 (mobile version). This picture should be roughly 500px wide

photo_2_big url

has_photo_2_small boolean

Add smaller version for mobile. (Optional) Mobile versions will be loaded quicker on smaller screens

photo_2_small url

Photo 2 (mobile version).

Slider settings

slider_radius number

Size.

slider_fill_type string

Type.

Allowed values:

  • color (Color)
  • image (Image)

slider_fill_image url

Image.

slider_fill_overlay color

Fill.

slider_fill_standalone color

Fill (outside picture).

slider_line_thickness number

Slider line thickness.

slider_line_color color

Slider line color.

Layout

layout.body_font font

Font.

layout.max_width number

Maximum width. Leave blank to stretch to container width

Min: 50

layout.background_color_enabled boolean

Color.

Allowed values:

  • true (On)
  • false (Off)

layout.background_image_enabled boolean

Image.

Allowed values:

  • true (On)
  • false (Off)

layout.background_color color

Color.

layout.background_image_src url

Image URL.

layout.background_image_size string

Size.

Allowed values:

  • cover (Fill)
  • contain (Fit)
  • auto (Original)
  • 100% 100% (Stretch)

layout.background_image_position string

Position.

Allowed values:

  • top left (Top left)
  • top center (Top center)
  • top right (Top right)
  • center left (Center left)
  • center center (Center)
  • center right (Center right)
  • bottom left (Bottom left)
  • bottom center (Bottom center)
  • bottom right (Bottom right)

layout.layout_order string

Layout order.

Allowed values:

  • stack-default (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAdCAYAAAHZdKxuAAAAAXNSR0IArs4c6QAAANhJREFUSA3tVNEOwiAM7Iy/p2/wkTz6g5gjOVZZEepcjMmWLBTau95ugIh6lpzzLcb4wNpFJaRk9MIahxAyXmD7mC7BC2RlFbliQjFMpJTujOdGs/ECwRoP3rlKoEzNJlz3+CwutK0NLRVt2QhjggA9n2IGEKANMxmt0VVsEfxgzfX7zL3ZiqbXLjcKc8vEORk5/75mMB/7u11uuIpdbtDCc5R3l/s+e+pmHt1foza7Nv6IXOeHiqGk9zWtSk1cN2cPrItnYjZzHZEZYtacxHTiuANSO/xN8AS4uW8Rw1Gu2AAAAABJRU5ErkJggg==)
  • stack-2 (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAdCAYAAAHZdKxuAAAAAXNSR0IArs4c6QAAAMpJREFUSA3tVMsKwyAQNKW/l970Iz32Bw0jjKTrSLUY0oOBsO5rnOwYnTs9W0ppDyG8EcsOkw8uauu9T3jR2+75yJxBnnC4JxMxxlezg0V9VsJsIGz75TfKdlkpg3aPcT8TsPNRMJjZEIf5xaAAahUyE+RtfcZvtFLoFh95aFXxH4hCWpUoTCg7fxqUfB4yEcl/CJlNy5qbfuZA8m8CwJ77q2djSj50lnuAWbOAOQlXxCuRHxcUje2XzfgrYzBpHUXLkmxh181SpnEAB4Vg0DSGhHsAAAAASUVORK5CYII=)
  • stack-3 (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAdCAYAAAHZdKxuAAAAAXNSR0IArs4c6QAAANFJREFUSA3tVEEOwyAMo9O+193gkRz3QSZHMmNRUkGp1guVqkCIHZMAITTfVkrZU0pv+B7NQpCV1vEdxxgLfmB9jEvwBBNzkjXn/HIRDOqzJs0GwS1eEmonAn52RITJaUYScd5KLl0fTQf58HVpIFlXMDPNBVMf2TDXPq7dZM2eelrMQ6uDucG50mlWzG/ooCWDvqENXldn1pcyhpgJWjYcPe5z5ZFrAgoe2LN0f2v1ZYq5UyofuiME99hFXKtUm1c9aoBmeEeRjVIQma6XpVblAwnpZjN/VjqsAAAAAElFTkSuQmCC)
  • stack-4 (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAdCAYAAAHZdKxuAAAAAXNSR0IArs4c6QAAANtJREFUSA3tVNEOwjAI3Iy/p2/tR/bRH6zekmuA1glO45bYZAHKcdDCOk1izbXWC+0zlJzzDVJ5sNGW9qSUKj4QKY8yWvBDUWnoKKVcTzS2yWHiIfeMwm2yIbLbRL3DRJYubi+0bAPCkcvapO3AdFgZvuDuyJZR2i4wSpBBP9ZD7RsOLQ9gD/Y5ZmaA3EEHWY6r3SEwrzDEHLpnlvOXa4/7xttZfhNwyPdKcqLPaz6JlXpr9bNgCfbobw2ch5iY0CQzyCOPR9ya5zleBPNy3LxknAbiv1YxExxH3gEqBW7I4zw3PQAAAABJRU5ErkJggg==)

layout.space_between_sections string

Space between sections.

Allowed values:

  • 0 (▁)
  • 0.5 (▃)
  • 1 (▄)
  • custom (...)

layout.space_between_sections_custom number

Custom.

Max: 100

layout.margin_top number

Top.

layout.margin_right number

Right.

layout.margin_bottom number

Bottom.

layout.margin_left number

Left.

layout.border.enabled boolean

Show borders around visualisation.

layout.border.top.width number

Top.

layout.border.top.style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.border.top.color color

Color.

layout.border.right.width number

Right.

layout.border.right.style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.border.right.color color

Color.

layout.border.bottom.width number

Bottom.

layout.border.bottom.style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.border.bottom.color color

Color.

layout.border.left.width number

Left.

layout.border.left.style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.border.left.color color

Color.

layout.header_align string

Alignment.

Allowed values:

  • left (fa-align-left)
  • center (fa-align-center)
  • right (fa-align-right)

layout.title string

layout.title_styling boolean

Styling.

layout.title_size string

Size.

Allowed values:

  • 1.4 (ᴀ)
  • 1.6 (A)
  • 2 (fa-font)
  • custom (...)

layout.title_size_custom number

Custom. Specify a custom responsive font size. Best results will be with values between 1.2 and 3

layout.title_weight string

Weight.

Allowed values:

  • bold (Bold)
  • normal (Regular)

layout.title_color color

Color.

layout.title_line_height number

Line height.

Max: 3

layout.title_space_above string

Space above.

Allowed values:

  • 0 (▁)
  • 0.5 (▃)
  • 1 (▄)
  • custom (...)

layout.title_space_above_custom number

Custom.

Max: 100

layout.subtitle string

layout.subtitle_styling boolean

Styling.

layout.subtitle_size string

Size.

Allowed values:

  • 1.4 (ᴀ)
  • 1.6 (A)
  • 2 (fa-font)
  • custom (...)

layout.subtitle_size_custom number

Custom. Specify a custom responsive font size. Best results will be with values between 1.2 and 3

layout.subtitle_weight string

Weight.

Allowed values:

  • bold (Bold)
  • normal (Regular)

layout.subtitle_color color

Color.

layout.subtitle_line_height number

Line height.

Max: 3

layout.subtitle_space_above string

Space above.

Allowed values:

  • 0 (▁)
  • 0.5 (▃)
  • 1 (▄)
  • custom (...)

layout.subtitle_space_above_custom number

Custom.

Max: 100

layout.text string

layout.text_styling boolean

Styling.

layout.text_size string

Size.

Allowed values:

  • 1.2 (ᴀ)
  • 1.4 (A)
  • 1.6 (fa-font)
  • custom (...)

layout.text_size_custom number

Custom. Specify a custom responsive font size. Best results will be with values between 1.2 and 3

layout.text_weight string

Weight.

Allowed values:

  • bold (Bold)
  • normal (Regular)

layout.text_color color

Color.

layout.text_line_height number

Line height.

Max: 3

layout.text_space_above string

Space above.

Allowed values:

  • 0 (▁)
  • 0.5 (▃)
  • 1 (▄)
  • custom (...)

layout.text_space_above_custom number

Custom.

Max: 100

layout.header_border string

Allowed values:

  • top (Top)
  • bottom (Bottom)
  • none (None)

layout.header_border_width number

Width.

layout.header_border_color color

Color.

layout.header_border_style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.header_logo_enabled boolean

Allowed values:

  • true (Enabled)
  • false (Disabled)

layout.header_logo_src url

URL.

layout.header_logo_height number

Height.

layout.header_logo_align string

Align. Align logo inside header or outer visualisation container

Allowed values:

  • outside (Outside)
  • inside (Inside)

layout.header_logo_position_inside string

Position.

Allowed values:

  • top (Top)
  • left (Left)
  • right (Right)

layout.header_logo_position_outside string

Position.

Allowed values:

  • left (Left)
  • right (Right)

layout.header_logo_margin_top number

Top.

layout.header_logo_margin_right number

Right.

layout.header_logo_margin_bottom number

Bottom.

layout.header_logo_margin_left number

Left.

layout.source_name string

Source name.

layout.source_url string

Source url.

layout.multiple_sources boolean

Multiple sources.

layout.source_name_2 string

Source name.

layout.source_url_2 string

Source url.

layout.source_name_3 string

Source name.

layout.source_url_3 string

Source url.

layout.source_label string

Source label.

layout.footer_note string

Note.

layout.footer_text_size number

Size.

layout.footer_text_color color

Color.

layout.footer_align string

Alignment.

Allowed values:

  • left (fa-align-left)
  • center (fa-align-center)
  • right (fa-align-right)
  • justify (fa-align-justify)

layout.footer_logo_enabled boolean

Allowed values:

  • true (Enabled)
  • false (Disabled)

layout.footer_logo_src url

Image.

Link.

layout.footer_logo_height number

Height.

layout.footer_logo_margin number

Margin.

layout.footer_logo_order string

Position.

Allowed values:

  • left (Left)
  • right (Right)

layout.footer_align_vertical string

V. align.

Allowed values:

  • flex-start (Top)
  • center (Center)
  • flex-end (Bottom)

layout.footer_border string

Allowed values:

  • top (Top)
  • bottom (Bottom)
  • none (None)

layout.footer_border_width number

Width.

layout.footer_border_color color

Color.

layout.footer_border_style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)