group items from channel, by 8

Question

I want to group entries by 8. The last div demonstrates that there might be an exact amount of entries that are divisible by 8.

<div class="item-container active">
 item 1
 item 2
 item 3..
 item 8
</div>

<div class="item-container">
 item 9...
 item 16
</div>

<div class="item-container">
 item 17
 item 18
 item 19
</div>

I want to do it this way so I can use a jquery slide in effect, when you click a button, it would slide/fade-in the next div of items.

I was able to achieve this thanks to the math count % == 0, thanks guys.

Now I have another question, I need to output the appropriate carousel list links

<ol class="carousel-indicators">
        <li data-target="#myaccountCarousel" data-slide-to="0" class="active"></li>
    {exp:channel:entries channel="recipes"}
        {if count % 8 == 0}
            <li data-target="#myaccountCarousel" data-slide-to="{if count % 8 == 0}{count / 8}{/if}"></li>
        {/if}
    {/exp:channel:entries}
</ol>

You can see what I am trying to do with {count / 8} so the html will render like, obviously it is not working, but you can see what I am trying to do, my goal html output would be:

<li data-target="#myaccountCarousel" data-slide-to="0"></li>
<li data-target="#myaccountCarousel" data-slide-to="1"></li>
<li data-target="#myaccountCarousel" data-slide-to="2"></li>
<li data-target="#myaccountCarousel" data-slide-to="3"></li>
<li data-target="#myaccountCarousel" data-slide-to="4"></li>
<li data-target="#myaccountCarousel" data-slide-to="5"></li>
...

I thought maybe I could set a dynamic variable with doing something like:

{if count % 8 == 0}{dynamic_variable == count / 8}{/if}

<li data-target="#myaccountCarousel" data-slide-to="{dynamic_variable}"></li>

I know I could use stash to store the variable but I don't know how I would get count / 8 math to work outside of the conditional since the EE docs say the math only works within a conditional, any help is appreciated.

Answer 1

Now that ExpressionEngine includes a modulus operator (as of 2.7.1), you can also use that instead of switch if you prefer.

Put the first html block's opening tag and the final block's closing tag outside of channel:entries and use modulus to conditionally close and re-open blocks of html:

<div class="item-container active">                
    {exp:channel:entries channel="some_channel"}

        your output here <br>

        {if count % 8 == 0}
            </div>
            <div class="item-container">
        {/if}

    {/exp:channel:entries}
</div>

EE Documentation on Modulus Operator

Answer 2

switch can help in this case:

<div class="item-container active">
    {exp:channel:entries channel="yourchannel"}
        <img src=".." />

        {if count != total_results} 
          {switch='|||||||</div><div class="item-container">'}
        {/if}
    {/exp:channel:entries}
</div>

Answer 3

You could also use the new modulus operator:

{exp:channel:entries channel="yourchannel"}

    {if count % 8 == 1}
        <div class="item-container active">
    {/if} 

        <img src=".." />

    {if count % 8 == 0 OR count == total_results} 
      </div>
    {/if}
{/exp:channel:entries}