Photo slider

A simple interactive template to compare two pictures.

Updated 6 months ago 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

Explains to developers how to use this template with the Flourish Live API.

template: _101

version: _13

Photos

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).

Slide settings

fading boolean

Fade images.

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