TypeError: jQuery(...).find(...).carousel is not a function
<p>For some reason I'm getting js error that the carousel is not a function although I have all the scripts connected, e.g. jquery.js and bootstrap.js before calling the script.js where I have the carousel function. </p>

<p>I have the code working just fine in the website but when I moved to web app I'm getting that error, although the elements are same. </p>

<p>So in the master page I have this in the header part:</p>

<pre><code>&lt;script src="/assets/js/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="/assets/js/jquery-noconflict.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="/assets/js/jquery-migrate.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="../Scripts/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="/assets/js/script.js" type="text/javascript"&gt;&lt;/script&gt; 
</code></pre>

<p>All scripts are loaded fine, and once I have the page open I have this exception:</p>

<p><a href="https://i.stack.imgur.com/B79QE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B79QE.png" alt="enter image description here"></a></p>

<p>In script.js I have this:</p>

<pre><code>jQuery('myCarousel').find('.carousel').carousel({
    interval: 8000
});
</code></pre>

<p>I'll say again, the same structure is working fine in the older website, not sure why its different here.</p>

<h2>Update</h2>

<p>Html markup generated:</p>

<pre><code>&lt;div id="myCarousel" class="carousel slide"&gt;
                    &lt;div class="carousel-inner"&gt;
                        &lt;div class="active item"&gt;
                        &lt;div class="title"&gt;&lt;h2&gt;header&lt;/h2&gt;&lt;/div&gt;
                        &lt;figure&gt;&lt;img src="/assets/images/gallery/YCQE183J8RHACYCHLISF.jpg" alt=""&gt;&lt;/figure&gt;
                        &lt;div class="carousel-caption"&gt;&lt;a href="#"&gt;Learn more about our programs. &lt;/a&gt;&lt;div class="arrow-right"&gt;&lt;/div&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="item"&gt;
                        &lt;div class="title"&gt;&lt;h2&gt;text1&lt;/h2&gt;&lt;/div&gt;
                        &lt;figure&gt;&lt;img src="/assets/images/gallery/IB819WTCBL3HRM7NZ2CA.jpg" alt=""&gt;&lt;/figure&gt;
                        &lt;div class="carousel-caption"&gt;&lt;a href=""&gt;text3&lt;/a&gt;&lt;div class="arrow-right"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
                        &lt;div class="item"&gt;&lt;div class="title"&gt;&lt;h2&gt;text2&lt;/h2&gt;&lt;/div&gt;&lt;figure&gt;&lt;img src="/assets/images/gallery/6KCDVUKYCAXH91M6MWAU.jpg" alt=""&gt;&lt;/figure&gt;&lt;div class="carousel-caption"&gt;&lt;a href="#"&gt;text4&lt;/a&gt;&lt;div class="arrow-right"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

                    &lt;/div&gt;
                    &lt;a data-slide="prev" href="#myCarousel" class="carousel-control left"&gt;&lt;/a&gt;
                    &lt;a data-slide="next" href="#myCarousel" class="carousel-control right"&gt;&lt;/a&gt;
                &lt;/div&gt;
</code></pre>