Image Compare Slider Component

The image compare slider component allows you to make comparisons between two images.

The user can drag a slider to show less of the before image and more of the after image, and vice versa.

When to use the Image Compare Slider component

Use the image compare slider component when you want to show one image and reveal another through a user-controlled slider.

Usability guidance

This component is best suited for before and after type image comparisons.

The two images should be the same dimensions for the best effect.

Implementation

  1. Open a page in Modern Campus CMS and enter editing mode.
  2. Place your cursor where you would like to place the component.
  3. From the toolbar, select the component icon  Snippet icon , which resembles an atom symbol.
  4. From the list of components, select the Image Compare Slider component.
  5. Fill in the required fields and select your options.
  6. Save and preview.

Galloway aerial campus photo from 2020
Galloway aerial campus photo from the early 80's

The left and right labels are optional.

 

Leo Ullman Exhibit Finished
Leo Ullman Exhibit Under Construction

The starting point of the slider can be set at different percentages.