Only load flexslider type if used on this page

Question

I am using 2 different sliders on my website. One of these sliders is only used on a couple of pages, so on the pages that it is not being used I get an error message in console:

TypeError: flexslider is undefined

How do I tell it to ignore this type of flexslider if it is not used on this particular page?

This is the slider that must always be displayed:

 $('.bannerflexslider').flexslider({
    animation: "fade",
    controlNav: false,
    directionNav: false,
    slideshowSpeed: 5000,
    animationSpeed: 600, 
    touch: true,  
    start: function(slider){
      $('body').removeClass('loading');
    }
  });`

This is the slider that must only be displayed on some pages:

$('.subpageslide').flexslider({
    animation: "slide",
    controlNav: true,
    directionNav: false,
    slideshow: true,
    slideshowSpeed: 4000,
    animationSpeed: 600,
    itemWidth:  263,
    margin: 5,
    touch: true, 
    start: function(slider){
      $('body').removeClass('loading');
    }
  });

For a bit of context, this is a wordpress site and this code is in script.js in the js folder.

I tried to use Rob Bennet's suggestion from the comments on this page, but it made my subpageslide completely inactive, even on the pages where it was meant to be used.

https://css-tricks.com/snippets/javascript/check-if-function-exists-before-calling/

this should do it for you `$(selector).hasClass(className);` — Adam Buchanan Smith, Feb 17 '16 at 17:09
Possible duplicate of [Determine if an element has a CSS class with jQuery](http://stackoverflow.com/questions/263232/determine-if-an-element-has-a-css-class-with-jquery) — Adam Buchanan Smith, Feb 17 '16 at 17:22

score 1 · Accepted Answer · answered Feb 17 '16 at 17:20

You could put in a simple conditional that would check to see if the element exists on the page before creating a flexslider.

if($('.subpageslide').length) {
    $('.subpageslide').flexslider({
        animation: "slide",
        controlNav: true,
        directionNav: false,
        slideshow: true,
        slideshowSpeed: 4000,
        animationSpeed: 600,
        itemWidth:  263,
        margin: 5,
        touch: true, 
        start: function(slider){
          $('body').removeClass('loading');
        }
    });
}

Only load flexslider type if used on this page

1 Answers1