Bootstrap carousel for slideshow
  • Hello
    I'm making a theme based on Twitter Bootstrap framework, and  stuck trying to get a Newscoop slideshow to fit into the BS carousel. 

    Basic BS Carousel code is:
    <div id="myCarousel" class="carousel slide">
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="active item">…</div>
        <div class="item">…</div>
        <div class="item">…</div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>



    Question is, from here https://wiki.sourcefabric.org/display/NsLingo/Slideshows how can I get the first slideshow item into div class="active item" and the rest into div class="item"??

    Thanks
    Post edited by hadders at 2013-01-22 06:59:29
  • 7 Comments sorted by
  • This seems to do the job:

    {{* This part builds the article gallery. There can also be more than one gallery *}} 
    {{ foreach $gimme->article->slideshows as $slideshow }}

             <div id="myCarousel" class="carousel slide">
             
              <h4>{{ $slideshow->headline }}</h4>
                 
      <!-- Carousel items -->
              
             <div class="carousel-inner">
                
    {{ assign var="counter" value=0 }}              
    {{ foreach $slideshow->items as $item }}      
    {{ assign var="counter" value=$counter+1 }}
        

    {{ if $counter == 1 }}
    <div class="active item"> <img src="{{ $item->image->src }}" width="{{ $item->image->width }}" height="{{ $item->image->height }}" alt="{{ $item->caption }}" style="max-width: 100%" rel="resizable" />   
    </div>
    {{ else }}
        <div class="item"><img src="{{ $item->image->src }}" width="{{ $item->image->width }}" height="{{ $item->image->height }}" alt="{{ $item->caption }}" style="max-width: 100%" rel="resizable" />    
        </div>

    {{ /if }}                       
                               
    {{ /foreach }}
           
           </div> 

     <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>

    <script>
          !function ($) {
            $(function(){
              // carousel demo
              $('#myCarousel').carousel('pause')
            })
          }(window.jQuery)
        </script>
         
    {{ /foreach }}


  • Vote Up0Vote Down Micz FlorMicz Flor
    Posts: 184Administrator
    I can not answer your question, but I want to hurrah your effort. Do you think you could provide the final result for our theme page? I started working on this on the weekend, but I don't find the time :( this is however, my number one dream theme to have.
  • Of course - it will be live in a few weeks. It actually started off as Custodian with scaffolding etc replaced with Bootstrap.. 
  • The code seems too hard to understand for those who have no any code experience. To do it easier, you should make flash photo slideshow with Kvisoft Flash Slideshow Designer.
  • Why would we use flash when it's a) not supported by adobe anymore and b)
    incompatible with iOS devices?


    On Fri, Aug 16, 2013 at 11:17 AM, Colton Martin <<br />newscoop-templates@lists.sourcefabric.org> wrote:

    > The code seems too hard to understand for those who have no any code
    > experience. To do it easier, you should make flash photo slideshow with *Kvisoft
    > Flash Slideshow Designer*.
    >
    >
  • I'm using another method using third-party slider called - bxslider.com (which is free and please check the codes examples here).

    Then my slider.tpl has the following simple code.. Works perfectly:

    <ul class="bxslider1">
    {{ set_issue number="14" }}
    {{ list_playlist_articles id="11"}}  
    <li>
    <div id="FrontPageSlideImageCaption">
    <ul>
    <li>
    <a href="{{ uri options="article" }}" class="NTitle" title="{{ $gimme->article->name }}">{{ $gimme->article->name }}</a>
    </li>
    <li>
    {{ $gimme->article->deck }} 
    </li>
    </ul>
    </div>
    {{ include file="_tpl/img/img_750x320.tpl" }}
    <a href="{{ uri options="article" }}" class="NTitle" title="{{ $gimme->article->name }}"><p>{{ $gimme->article->summary }}</p></a>
    </li>
    {{ /list_playlist_articles}} 
    </ul>
    <script>
    $('.bxslider1').bxSlider({
    mode: 'fade',
    auto: true,
    pause: 3500,
    captions: true });
    </script>
    <div style="clear:both;"></div>

    Of course, you need to have the sliders dimensions (in my case 750x320px) and css defined according to your site design.




  • BXSlider is excellent. My current use of it is like the following.

    The $currplaylist smarty variable is to handle multilingual versions.

        {{ $currlang = $gimme->language->code }}
        {{ $currplaylist = "Carousel-" }}
        {{ $currplaylist = $currplaylist|cat:$currlang }}

        <section class="bxslider">
        {{ list_playlist_articles name="$currplaylist" length="4" }}

            <article>
                <a href="{{ url options='article' }}">{{ include file="_tpl/img/img_front.tpl" where="topfront" }}</a>
                <h2><a href="{{ url options="article" }}">{{ $gimme->article->name }}</a></h2>
            </article>

        {{ /list_playlist_articles }}
        </section>