How can I resolve the flex slider?

Question

Can anyone help me figure out why am I getting this error?

Uncaught TypeError: jQuery(...).flexslider is not a function

    jQuery(document).ready(function() {
    jQuery('.slider').flexslider();

at HTMLDocument.\<anonymous\> (custom-mega-menu.js:4:11492)
at i (custom-mega-menu.js:2:33554)
at Object.fireWith \[as resolveWith\] (custom-mega-menu.js:2:34521)
at Function.ready (custom-mega-menu.js:2:36662)
at HTMLDocument.K (custom-mega-menu.js:2:37059)

the code I have:

I tried googling and youtube but I can't find something specific to help figure it out.

Answer 1

One can reproduce the problem via

$(".slider").flexslider();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider"></div>

which is due to the fact that there is a flexslider plugin and you need to include that:

$(function() {
    $(".slider").flexslider();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/jquery.flexslider-min.js"></script>
<div class="slider"></div>

In this second snippet the problem no longer reproduces.