Adding CSS Filters

You can add CSS Filters to the slides. Master Slider applies these filters to the slides based on their position in the slider. To define a CSS filter, you need to create an object containing the filters properties. In the following you can find an example:

<pre>
  var slider = new MasterSlider();
  slider.setup( 'headerSlider', {
    width: 900,
    height: 700,
    filters: {
      grayscale: 1,
      opacity: 0.5,
      brightness: 2
    }
  });
</pre>

Note: For more information about CSS filters take a look at this page.

filterTarget option

This slider options specify the target element in the slides for applying the filters. Possible values: 'slide' and 'slide-background' or any slide scoped CSS selector.

Note: Since this feature is recently added to CSS, it is not available in all browser, particularly old IE versions.