Forums

Bug with Bootstrap Carousel and C5 5.5.2.1

Permalink
Hi Guys,

Been wondering for a while now why my Twitter Bootstrap Carousel doesn't work when I render it in C5. After much trial and error, I traced the problem down to ccm.app.js.

Here's my Carousel code:

<div id="myCarousel" class="carousel slide">
        <!-- Carousel items -->
        <div class="carousel-inner">
         <div class="item active"><img src="/index.php/download_file/1/1/"></div>
         <div class="item "><img src="/index.php/download_file/2/1/"></div>
         <div class="item "><img src="/index.php/download_file/3/1/"></div>
         <div class="item "><img src="/index.php/download_file/4/1/"></div>
         <div class="item "><img src="/index.php/download_file/5/1/"></div>
         <div class="item "><img src="/index.php/download_file/6/1/"></div>
       </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
      </div>
</div>


I then init with:

$('#myCarousel').carousel({
          interval: 5000
        });


It will display the first slide, then the second, and then stop. Pressing the next/previous buttons displays one slide, then won't work any more.

Turns out if I remove

<script type="text/javascript" src="/concrete/js/ccm.app.js?v=e35f14d114b2ab1e6bac8865c1fd1ad0"></script>


All starts working perfectly.

I really would like to continue using the Bootstrap Carousel so I was wondering if anyone else had encountered this or has any advice on how to debug this further ?

Many thanks

Tim
 
Mnkras replied on at Permalink Reply
Mnkras
I think that Nivo Slider could be interfering,
not 100% sure though, could you provide a live example?
edhebert replied on at Permalink Reply
I have the identical problem, and am interested to know if anyone finds a solution.
edhebert replied on at Permalink Reply
by the way, my site is under development, but I've activated it temporarily so you can see the problem.

http://edhebert.com/projects/
edhebert replied on at Permalink Reply
Just noticed that the issue only appears when I am logged in with the dashboard open. The issue disappears once I'm logged out. So that's actually not too bad, although there's a conflict between Bootstrap's Carousel and the C5 admin panel.
tlloyduk replied on at Permalink Reply
This is what I did to fix it:

I changed (from my footer page):
<?php
   Loader::element('footer_required');


To be:

<?php
   global $u;
   if ($u->isLoggedIn ()) {
      Loader::element('footer_required');
   }
 ?>


Tim
edhebert replied on at Permalink Reply
thanks Tim!