Before & After Image Slider

http://www.muse-themes.com/products/before-after-image-slider

Compare two different images within the same frame with this notable slider. This widget will give you the unique before and after perspective of two different views, along with customization options. In addition, this slider is easy to set up and mobile optimized.

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.2
  • Supported Devices: Desktop, Tablet, Phone


Release Log

  • 1.2: Built CSS into widget script internally to allow for even better SSL performance (06/24/2016)
  • 1.1: Improved compatibility on secured website domains (04/08/2016)
  • 1.0: Adds collapsible panel functionality and support for responsive Muse


 



Setup

  • Drag the widget from the library and drop into your project in Design mode.
  • Place the widget where you would like to see the slider.
  • You will want to do some prep work for this widget. You will need to have a concept for how you would like to use the widget. For example, you could have the slider show a black & White image as the before image, and a color image as the after image. You will want to prepare the images in a photo editor before setting up the widget in Muse. In our B&W/color example, you could open a single image in your photo editor. Convert a color image to B&W and save as a separate version.
  • Open the widget options panel.
  • In the Before Image field, click the Add File link and load the before image (the B&W image in our example)
  • In the After Image field, click the Add File link and load the after image (the color image in our example)
  • The Layout setting allows the slider to work in a left/right fashion, or up/down fashion.
  • Use the Before Label and After Label to create captions for the slider sections.
  • The Hide Labels checkbox setting disables labels from showing.


Commonly Asked Questions

No commonly asked questions


Known Issues/Conflicts

No known issues or conflicts


Additional Info Links