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.

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.

So in the master page I have this in the header part:

<script src="/assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="/assets/js/jquery-noconflict.js" type="text/javascript"></script>
    <script src="/assets/js/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="/assets/js/script.js" type="text/javascript"></script> 

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

In script.js I have this:

jQuery('myCarousel').find('.carousel').carousel({
    interval: 8000
});

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

Update

Html markup generated:

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

                    </div>
                    <a data-slide="prev" href="#myCarousel" class="carousel-control left"></a>
                    <a data-slide="next" href="#myCarousel" class="carousel-control right"></a>
                </div>

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.

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.

So in the master page I have this in the header part:

<script src="/assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="/assets/js/jquery-noconflict.js" type="text/javascript"></script>
    <script src="/assets/js/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="/assets/js/script.js" type="text/javascript"></script> 

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

In script.js I have this:

jQuery('myCarousel').find('.carousel').carousel({
    interval: 8000
});

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

Update

Html markup generated:

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

                    </div>
                    <a data-slide="prev" href="#myCarousel" class="carousel-control left"></a>
                    <a data-slide="next" href="#myCarousel" class="carousel-control right"></a>
                </div>

• javascript
• jquery
• html
• twitter-bootstrap
• jquery-ui

• Where is the carousel script? – iCollect.it Ltd Commented Jan 22, 2016 at 10:14
• @debin: That will make no difference and the selector is wrong unless there is a <myCarousel> tag in the page :) – iCollect.it Ltd Commented Jan 22, 2016 at 10:19
• that's correct (y) @TrueBlueAussie – Dhara Commented Jan 22, 2016 at 10:20
• Q: Which specific carousel are you using? According the script shown you are not using any :) – iCollect.it Ltd Commented Jan 22, 2016 at 10:21

2 Answers 2

You seem to be missing any carousel script. That will cause the carousel is not a function message. It is not part of jQuery and is only part of boostrap if you have the full version. Otherwise you need to include the bootstrap carousel.js plugin file too. http://www.w3schools./bootstrap/bootstrap_carousel.asp

Also your selector will not work as myCarousel is an id, so should have been #myCarousel but .carousel is on the same element so find will not match anything under it:

try:

jQuery('#myCarousel.carousel').carousel({
    interval: 8000
});

or better yet (as id selectors are the most efficient) just:

jQuery('#myCarousel').carousel({
    interval: 8000
});

In my case, I have to add the code inside the document ready function $( document ).ready(function() { }); and the error went away. Hope it'll help someone.