Bootstrap carousel for slideshow
  • Vote Up0Vote Down haddershadders
    Posts: 26Member
    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
  • Vote Up1Vote Down haddershadders
    Posts: 26Member
    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.
  • Vote Up0Vote Down haddershadders
    Posts: 26Member
    Of course - it will be live in a few weeks. It actually started off as Custodian with scaffolding etc replaced with Bootstrap.. 
  • Vote Up0Vote Down Colton MartinColton Martin
    Posts: 1Member
    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.
  • Vote Up0Vote Down Pete HaughiePete Haughie
    Posts: 14Member
    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*.
    >
    >
  • Vote Up0Vote Down Karun ThapaKarun Thapa
    Posts: 2Member
    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.




  • Vote Up0Vote Down Pete HaughiePete Haughie
    Posts: 14Member
    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>
Add a Comment