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

Question

I am developing a Joomla 3 template using the T3 Framework, and I have included the IceCarousel module, which uses the Flexslider plugin. However, the IceCarousel module IceCarousel not work because there is a javascript error that states:

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

I took a look at the source of the page, and the flexslider source files definitely exist. There is also a /media/jui/jquery-noconflict.js file that comes with Joomla 3. I am not sure what exactly causes this problem. Is this a javascript stacking order issue?

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

Answer 1

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

Answer 2

Try simplifying your code to see if there is a synchronization problem, for example:

 $(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'); } }); }); 

});

In addition, flexslider examples use a class, not an identifier (although I don't think this causes a problem).

Answer 3

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

After doing my own research, finally, I got the problem and fixed it, remember that do not use the defer or async keyword in two files:

1- jquery.flexslider-min.js

2- jquery.prettyPhoto.js

Answer 4

I used the 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 title after regular 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 I got rid of some other JS buggy that appeared after and worked.

Answer 5

For people using Wordpress and getting this error:

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

This is applicable for loading the script into the header.php file. It would be best practice to load all js in the footer, but there may be times when you don't have control over this.

Hope this helps someone else as it helps me :)