800,000+ WordPress sites are already using MetaSlider!

MetaSlider Documentation

Let’s Connect

To understand No Conflict Mode, first we need to understand the problem.

When you embed a MetaSlider slideshow onto one of your pages, the shortcode will output a slideshow to your page with (something similar to) the following markup:

  • ... slide 1 ...
  • ... slide 2 ...

Note the “flexslider” class on the slideshow wrapper, this is needed to apply the flexslider styling to the slideshow.

Immediately after, the slideshow is initiated with the following JavaScript:

In most cases, this works.

The problem is that Flex Slider is a popular slideshow library and it’s often bundled into themes. These themes will often include the following JavaScript which is executed on every page:

Because the MetaSlider slideshow has a “flexslider” class, this call to FlexSlider will be run on the MetaSlider slideshow, but (crucially) without the MetaSlider specific settings.

No Conflict Mode

When “No Conflict Mode” is enabled, the slideshow output looks something like this:

  • ... slide 1 ...
  • ... slide 2 ...

Note, the “flexslider” class is absent. This means the themes call to FlexSlider will not target this slideshow.

And the JavaScript looks something like this:

Delaying the addition of the “flexslider” class to the slideshow markup will stop a theme from “hijacking” the MetaSlider initiation code. The “flexslider” class is added immediately after in order to apply the correct styling to the slideshow.

How To Enable “No Conflict Mode”

In the slideshow Advanced Settings, check the ‘No Conflict Mode’ checkbox and save the slideshow.


Still stuck? How can we help?
Last Updated on January 01, 1970

Start Using Your Slider Today!

Create and Publish Forms in Minutes… What are you waiting for?