Photo slider

A simple interactive template to compare two pictures.

Updated 2 months ago to v1.2.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: 1

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: "1",
    ...
}

Template settings

Options for opts.state.

Photos

fading boolean

Fading mode.

Allowed values:

  • false (Slide)
  • true (Fade)

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.

background color

Background color. You only see the background color when embedding the photo sliders on a fixed height