800,000+ WordPress sites are already using MetaSlider!

Using “No Conflict Mode” in MetaSlider

What is “No Conflict Mode” in MetaSlider?

“No conflict mode” is an option for the FlexSlider library in MetaSlider. This option can prevent issues with some themes.

  • Go to “MetaSlider” in our WordPress admin menu.
  • Edit your slideshow and look for the “Advanced Settings”.
  • Check the “No conflict mode’ box.
  • Save the slideshow.

The Technical Details Behind No Conflict Mode

When you use MetaSlider slideshow, our plugin will output a slideshow with markup that looks like this example below for the Flexslider option.

<div id="metaslider_123" class="flexslider">
<ul>
<li>... slide 1 ...</li>
<li>... slide 2 ...</li>
</ul>
</div>

Looking at this code, you’ll see a “flexslider” class on the slideshow wrapper. This is needed to apply the flexslider styling to the slideshow.

Immediately after this code loads, the slideshow is initiated with the JavaScript. In most cases, this process works.

The problem is that Flexslider is a popular slideshow library and it’s often bundled into themes. These themes will often include their own Flexslider JavaScript which is executed on every page:

Because the MetaSlider slideshow has a “flexslider” class, the theme’s call to FlexSlider will be run on the MetaSlider slideshow, but without the MetaSlider specific settings.

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

<div id="metaslider_123">
<ul>
<li>... slide 1 ...</li>
<li>... slide 2 ...</li>
</ul>
</div>

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

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 later in order to apply the correct styling to the slideshow.