Forum for discussing general topics related to Couch.
5 posts Page 1 of 1
Hi Everyone,

First of all Couch is amazing! :)

In my homepage, i have a slider which came with template that I bought.

Originally HTML version is like this:
Code: Select all
         <!-- Indicators -->
         <ol class="carousel-indicators">
            <li data-target="#home_carousel" data-slide-to="0" class="active"></li>
            <li data-target="#home_carousel" data-slide-to="1"></li>
         </ol>
         <!-- Wrapper for slides -->
         <div class="carousel-inner">
            <div class="item active">
               <img src="images/2.png" alt="" />
               <div class="carousel-caption">
                  <h2>Title</h2>
                   <p>Desc.</p>
               </div>
            </div>
            <div class="item">
               <img src="images/3.png" alt="" />
               <div class="carousel-caption">
                  <h2>Title</h2>
                   <p>Desc.</p>
               </div>
            </div>
         </div>


As you expect, I tried to implement it to Couch with repeatable function. class=item sections are okay, but Indicators part is not working.

You can see my code below:
Code: Select all
         <!-- Indicators -->
         <ol class="carousel-indicators">
         <cms:show_repeatable 'slider' >
         <?php $count = 0; $total = '<cms:show k_total_records />';
            while( $count <= $total ) {
            echo '<li data-target="#home_carousel" data-slide-to="$count"></li>';
            $count++;
            }
            ?>
            </cms:show_repeatable>
         </ol>
         
         <!-- Wrapper for slides -->
         <div class="carousel-inner">
         <cms:show_repeatable 'slider' >
            <div class="item <cms:show ilkslide />">
               <img src="<cms:show resim />" alt="" />
               <div class="carousel-caption">
                  <h2><cms:show baslik /></h2>
                   <p><cms:show detay /></p>
               </div>
               
            </div>
         </cms:show_repeatable>
         </div>


Hope you can help.

Thank you.
@onurguven, there are probably several ways to go about this, but this is what I use, and which works just fine for me:

Code: Select all
<!-- Indicators -->
         <ol class="carousel-indicators">
            <cms:show_repeatable 'slider' >
            <li data-target="#home_carousel" data-slide-to="<cms:sub k_count '1' />"<cms:if k_count=='1'> class="active"</cms:if>></li>
            </cms:show_repeatable>
         </ol>

Explanation:
The variable "k_count" contains the number of the current repeatable item. The problem, however, is that k_count starts its counting at '1', and we need it to start at '0'. In order to correct that, we use the "<cms:sub>" tag, which subtracts "1" from "k_count" and outputs the result.

Finally, you want the "class='active'" attribute to be present only in the first item, so all we do is check whether "k_count" is one, and output the class only then.

I hope this helps!
@luxlogica thank you so much. I'll learn more about cms: tags :D
@luxlogica, you said -
The problem, however, is that k_count starts its counting at '1', and we need it to start at '0'. In order to correct that, we use the "<cms:sub>" tag, which subtracts "1" from "k_count" and outputs the result.

We can use the 'startcount' parameter to make the k_count variable start from any arbitrary number e.g.
Code: Select all
<cms:show_repeatable 'whatever_region_name' startcount='0'>

Almost all the tags that provide the k_count variable also accept the 'startcount' parameter.
@kk, ooooh, that's useful! - I'm going to run and change my code right now! :-)
5 posts Page 1 of 1
cron