Matcha Labs

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

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

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

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:

<script>
    $("#metaslider_123").flexslider({
       // meta slider settings go here
    });
</script>

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:

<script>
    $(".flexslider").flexslider();
</script>

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

No Conflict Mode

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>

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:

<script>
    $("#metaslider_123").flexslider({
       // meta slider settings go here
    });

    $("#metaslider_123").addClass('flexslider'); // ensure the styling gets applied to the slideshow

</script>

Delaying the addition of the "flexslider" class to the slideshow markup will stop a theme from "hijacking" the Meta Slider 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.