[Solved] Twitter Bootstrap theme carousel issue

[igners]

Hello, I'm using the twitter bootstrap theme which work really well apart from one thing. There is a 5 second pause before the first carousel image loads, this gap is equal to the interval set in the bootstrap.js file (my interval is 5000 = 5s).

I have narrowed the problem down to this - the first slide should have a class 'active', the code is in the template (<div class="item{if $slide@first} active{/if}">) but it is not being applied:

Code: Select all

    {*<!-- Carousel
    ================================================== -->*}
    <div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
      {foreach $output_header as $slide}
        {if !empty($slide.2)}
        <div class="item{if $slide@first} active{/if}">
          <img src="{$slide.2}" alt="{$slide.0}">
          {if !empty($slide.0) || !empty($slide.1)}
          <div class="container">
            <div class="carousel-caption">
              {if !empty($slide.0)}<h1>{$slide.0}</h1>{/if}
              {if !empty($slide.1)}<p class="lead">{$slide.1}</p>{/if}
              {if !empty($slide.3)}<a class="btn btn-large btn-primary" href="{cms_selflink href=$slide.3}">Read more</a>{/if}
            </div>
          </div>
          {/if}
        </div>
        {/if}
    {/foreach}
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
    </div>

<!-- /.carousel -->

Does anybody know why this might be? Im using the latest CMS version, and the class is working on the demo site: http://i-arts.eu/bootstrap

[velden]

Well, I don't think it's good practice to set a 'required' class based on a double condition that does not per se evaluates to true.

Code: Select all

{if !empty($slide.2)}
        <div class="item{if $slide@first} active{/if}">

What if $slide.2 of the first slide is empty? There will be never be an active class set.

I would change that:

Code: Select all

<div class="carousel-inner">
      {assign var='setactive' value=false}
      {foreach $output_header as $slide}
        {if !empty($slide.2)}
        <div class="item{if !$setactive}{assign var='setactive' value=true} active{/if}">
          <img src="{$slide.2}" alt="{$slide.0}">

EDIT: added $-sign in code example.

[igners]

Thanks for that, the carousel is still working with your code but still with a 5 second delay at the start.

Its related to the fact that on the working version (at i-arts.eu) when I view source the first slide has a class <div class="item active"> where as on mine its just <div class="item">.

When i use inspect element in the browser dev tools the active class is added to each slide in turn as the carousel rotates, its just not quite right somehow - Its like when the page loads non of the slides are set to active so I get this pause.

[velden]

Maybe because of my typo (sorry for that):

Note: the $-sign I forgot in '$setactive'

Code: Select all

 <div class="item{if !$setactive}{assign var='setactive' value=true} active{/if}">

[igners]

That worked, thanks very much that problem was giving me a big headache.