Photo slider
Updated 2 months ago to v1.1.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.
API information
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:
photo_1_big url
has_photo_1_small boolean
I also have a 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
I also have a 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
Radius.
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.
targetPosition number
Where to start. Max: 1
background color
Background color. You only see the background color when embedding the photo sliders on a fixed height