$(...).flexslider is not a function error

Question

I'm developing a Joomla 3 template using the T3 Framework and I've included an IceCarousel module which uses the Flexslider plugin. However, the IceCarousel module isn't working because there is a javascript error that says:

$(...).flexslider is not a function
Line 477

I've taken a look at the page source and the flexslider source files are definitely there. There is also a /media/jui/jquery-noconflict.js file which comes standard with Joomla 3. I am not sure if this is what is causing the problem. Is this an issue of the order of the stacking of the javascript files?

http://www.veterantrainingsymposium.com/2014-home-page

Pilkington

See this question #15717098 – Rickard

Answer 1

You have defined the jquery two times. remove one jquery http://gyazo.com/c784a654eefe6e1b6ac061e562f3f051

Bearnard

This was my issue as well... There should really be a specific error thrown if this happens. – Paleogeography

Answer 2

I was faced the same problem and fixed it. I have used only one instance of jquery.js file, but still was getting the same problem.

After self investigating finally I got the issue and fix it,keep in mind do not use defer or async keyword in below 2 files:

1- jquery.flexslider-min.js

2- jquery.prettyPhoto.js

Innoxious

Answer 3

For people using Wordpress and getting this error:

Make sure that the link to the FlexSlider js ( ie: <script defer src="<?php bloginfo('template_url'); ?>/js/jquery.flexslider-min.js"></script> ) is below <?php wp_head(); ?>

This is applicable to loading script in the header.php file. Better practice would be to load all js in the footer, but there may be instances when you don't have control over that.

Hope this helps someone else as it helped me :)

Boondocks

Answer 4

Try simplifying your code to test if there is a timing issue, e.g.:

$(document).ready(function() {
$('#icecarousel119').flexslider({
    selector: ".slides > div", 
    animation: "slide",
    direction: "horizontal",
    itemWidth:90,
    slideshowSpeed:5000, 
    animationspeed:600,  
    itemMargin:0,
    minItems:1,
    maxItems:0, 
    move: 0,    

            slideshow: false,

            directionNav: true,

            controlNav: true,

    start: function(slider){
      $('body').removeClass('loading');
    }
  });
});

});

Also, flexslider examples use class, not id (though I don't think this is causing the issue)

Linda

Answer 5

I was using a WordPress plugin (Meta-Slider) and it did not include the Jquery Flexslider module.

Downloaded from here: https://github.com/woocommerce/FlexSlider

Added to my project, added to my header after a normal Jquery...

    <script src="<?php echo get_bloginfo('template_directory'); ?>/js/jquery-3.2.1.min.js"></script>
    <script src="<?php echo get_bloginfo('template_directory'); ?>/js/jquery.flexslider-min.js"></script>

Then got rid of some other buggy JS code that came after and it's working.

Valence