Bootstrap carousel jQuery issue

Topics: General
Feb 15, 2014 at 11:53 AM
Edited Feb 15, 2014 at 1:40 PM
thanks for your time and ideas

I'd like to use the Bootstrap Carousel. I installed it according to Steve's blog:

Environment: Orchard 1.7.2, latest 'bootstrap' theme loaded (
what, I think, is ok:
  • I'm able to create the layout for the 'Carousel' in the 'queries'
  • using the quey in a 'Projection' shows all the relevant ContentItems
However, with a breakpoint in 'bootstrap.js' ; the function is called BUT NO action re 'cycling'!
the Bootstrap.js level is:
below the part of 'source of the relevant page:
  • it shows the info for the appropriate .js
  • it shows the <script> for the function
  • also, when checking VStudio the 'bootstrap.js' is shown(loaded)in 'script documents'.
what am I missing! thanks for any hints!

very end of source page :
<div id="toTop"> <h1><i class="icon-chevron-sign-up"></i></h1> </div>
<script src="/OrchardLocal/Themes/Bootstrap/scripts/bootstrap.js" type="text/javascript"></script>
<script src="/OrchardLocal/Themes/Bootstrap/scripts/custom.js" type="text/javascript"></script>
<!-- Visual Studio Browser Link --> <script type="application/json" id="__browserLink_initializationData"> {"appName":"InternetExplorer"} </script> <script type="text/javascript" src="http://localhost:58916/321b0f76013440b2857408be6da86154/browserLink" async="async"></script>
<!-- End Browser Link --> </body>

part where the function is placed:
</article></div></div><a href="#" class="carousel-control left" data-slide="prev">‹</a><a href="#" class="carousel-control right" data-slide="next">›</a></div>
<script>$(function () {$('#').carousel({interval: 1500});}); </script>
Feb 16, 2014 at 4:55 PM
Hi Eddie,

I can't see what the actual container for your carousel is named (either class or id), but it looks like your jQuery initialization isn't set to apply to that container. Specifically in the line above that reads:
<script>$(function () {$('#').carousel({interval: 1500});});</script>
that line should read something more like:
<script>$(function () {$('#id-of-container').carousel({interval: 1500});}); </script>
where '#id-of-container' is the actual id of the carousel container being generated by your projection layout. You can also apply it to a class using '.class-of-container' if the projection layout isn't generating an id, but is generating a class instead.

Let me know if that helps to get it working.
Feb 18, 2014 at 7:13 AM
Edited Feb 18, 2014 at 12:23 PM
Philip, thanks for the time
The point you made is exactly where I have my problem. I did so many tests and tried once NOT using a 'container' id (set in the orchard query!.)

below a test WITH the container 'MyCarousel' (set in the orchard query!.) and the appropriate html. I have still no action (however, all my MediaLibrary ContentItems are rendered in a stacked way. I'm pretty sure I miss something stupid thanks again)

below the beginning of my carousel container:
<div class="OuterDivClass" id="MyCarousel"><ol class="carousel-indicators"><li class="active" data-target="#MyCarousel" data-slide-to="0"></li><li  data-target="#MyCarousel" data-slide-to="1"></li><li  data-target="#MyCarousel" data-slide-to="2"></li></ol><div class="InnnerDivClass"><div class="FirstItemClass">    <div class="content-control">
below the function used:
</article></div></div><a href="#MyCarousel" class="carousel-control left" data-slide="prev">&lsaquo;</a><a href="#MyCarousel" class="carousel-control right" data-slide="next">&rsaquo;</a>
 </div><script>$(function () {$('#MyCarousel').carousel({interval: 1500});}); </script>
Apr 22, 2014 at 6:14 AM
Edited Apr 22, 2014 at 6:15 AM
after some other activities I'm coming back to my Bootstrap issue ... I'm still having the same problem - the function .carousel is not called!

I did following changes:
  • us of PJS.Bootstrap theme
  • I use 1.7.3 Orchard (WEB) / same issue when using 1.7.2 (SRC) in VS
On the front end I see the left and right bar with the next/previous 'buttons' which react when hover over it.
However; my ContentItems are still stacked vertically and, as said, it seems that the 'carousel' function isn't called!?

I must miss something fundamentaly around the jquery business
your time and help is appreciated
<article class="widget-after-content widget-projection-widget widget">
            <h3>Photo Carousel</h3>
<div class="" id="OutDiv"><ol class="carousel-indicators"><li class="active" 
data-target="#OutDiv" data-slide-to="0"></li><li  data-target="#OutDiv" data-slide-to="1">
</li><li  data-target="#OutDiv" data-slide-to="2"></li></ol><div class=""><div class="">
<article class="content-item carousel-photo">

.... other html ......

</article></div></div><a href="#OutDiv" class="carousel-control left" 
data-slide="prev">&lsaquo;</a><a href="#OutDiv" class="carousel-control right" 
data-slide="next">&rsaquo;</a></div><script>$(function () {$('#OutDiv').carousel({interval: 2000});}); </script>
</article></div>            </div>
Apr 22, 2014 at 4:59 PM
Hi Edi,

Can you double check the page source to make sure that the Bootstrap JavaScript file is being loaded...also, if you're using Chrome or Firefox, can you check the console in the developer tools or FireBug to see if you're taking any kind of JavaScript error on the page. Many times there is another JavaScript error that kills anything after it.

Apr 22, 2014 at 7:26 PM
Hi Philip,
for all my tests I used IE11.
following statements are in the source code:
<script src="/OrchardLocal/Themes/PJS.Bootstrap/scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="/OrchardLocal/Themes/PJS.Bootstrap/scripts/custom.js" type="text/javascript"></script>

In VS WEB developer (2013); Solution Explorer; Script Documents: jQuery-1.9.1.js, Bootstrap.min.js and custom.js is loaded. I never get any jscript errors.
PS: in the same site I use a test 'accordion' which works correct and calls the .collapse function!

thanks for your time, ed
Apr 22, 2014 at 8:58 PM
Hi Edi,

Try adding the classes "carousel" and "slide" to the <div id="OutDiv"> tag. Also, add data-ride="carousel" to the div tag so that carousel starts automatically. Your code should look something like this:
<article class="widget-after-content widget-projection-widget widget">
        <h3>Photo Carousel</h3>
    <div class="carousel slide" id="OutDiv" data-ride="carousel">
        <ol class="carousel-indicators">
            <li class="active"
                data-target="#OutDiv" data-slide-to="0"></li>
            <li data-target="#OutDiv" data-slide-to="1"></li>
            <li data-target="#OutDiv" data-slide-to="2"></li>
        <div class="carousel-inner">
            <div class="item">
                <article class="content-item carousel-photo">
                    .... slide 1 html ......
            <div class="item">
                <article class="content-item carousel-photo">
                    .... slide 2 html ......
            <div class="item">
                <article class="content-item carousel-photo">
                    .... slide 3 html ......
        <a href="#OutDiv" class="carousel-control left" data-slide="prev">&lsaquo;</a>
        <a href="#OutDiv" class="carousel-control right" data-slide="next">&rsaquo;</a>
        $(function () {
            $('#OutDiv').carousel({ interval: 2000 });
Apr 23, 2014 at 7:07 PM
Hi Philip,

I added your sample as a 'shape' in the queries just to test with the most simple setup (my accordion in the same site also works that way!).
However NOTHING happens either i.e. I see the left and right bar with the next/previous 'buttons' which react when hover over it.

Now an embarrassing question: where can I change to call INSTEAD of the 'Bootstrap.min.js' the 'Bootstrap.js'? I would like to set some breakpoints in jscript to test!
I can't find where it's called ....!

thanks for the info, ed
Apr 23, 2014 at 7:18 PM
Hi Ed,

The bootstrap JavaScript file is added in the Document.cshtml shape. Just swap out the name of the file for the non-minimized version and you should be in business.

The current version of that theme is running on bootstrap 3.0. I don't believe any of the classes for the Carousel have changed between 3.0 and 3.1.1, but you may want to double check since you're going to be in the JS file.

Apr 23, 2014 at 8:21 PM
Hi Philip, thanks for your patience ..!
well, when setting a breakpoint in bootstrap.js I clearly call the 'carousel' BUT it doesn't 'return' anything!

The bootstrap.js (and .min.js) is on 3.0.3. Why are you bringing 3.1.1 into the game? I can't find any 3.1.1? But I'm clearly not a .js specialist!

I'm starting to think whether something is wrong with my IE11 setup (Internet Options)?

I'm kind'a out of ideas? But I still think I miss something really stupid!
thanks for time ... any hint is welcome, ed
Apr 23, 2014 at 8:27 PM
I only brought 3.1.1 into the conversation because you might have been using the example code on which is written for v3.1.1. That's why I mentioned the class names could "possibly" be different, but I didn't think they were.

Yes, definitely try a different browser as we all know Internet Explorer has serious issues with everything.

Apr 25, 2014 at 7:16 AM
Edited Apr 25, 2014 at 7:30 AM
I have the same issue on Firefox and chrome.

HOWEVER: when setting a breakpoint in 'bootstrap.js' and then stepping (F11) through the code after quite some time I get an error "Orchard.specs.dll not found"When checking that folder I do NOT have this .dll file (also not in the downloaded SRC from Codeplex! 1.8)

Detail msg:
Unable to step. There was a problem reading metadata from
('The system cannot find the file specified'). IntelliSense may
not work properly until the solution is reloaded.
PS: is this just an error because I'm stepping!?

Above you mentioned:
.... "Many times there is another JavaScript error that kills anything after it."

Beside Bootstrap.js (3.0.3) jQuery-1.9.1.js is used!

Any idea where to start looking?
Or, open a new thread in Orchard?
thanks again, ed
Apr 25, 2014 at 3:18 PM
As far as the .dll error, I think that may just be a need to rebuild the solution.

I can try to work something up locally to duplicate what you're doing. I'll need to know what your setup looks like though. You said you were using a projection? If you can let me know what that looks like, I'll try to duplicate it.

My initial guess is that your projection isn't rendering the items properly, which is why you're not seeing slides.

Apr 26, 2014 at 7:55 AM
Hi Philip, your ideas and explanations have brought me on the right track to understand your themes and the bootstrap business !

Finally it was a matter of applying the class names exactly as 'bootstrap' requires! The only name I can choose is the 'Outer Div ID'?!
In the end it's always simple!
thank you so much, ed