Tag Archives: mod

Loop through an apex:repeat and split the contents into multiple containers

I was trying to build a slider from a list.
<apex:repeat value="{!People}" var="item"> 
	<div class="user-card">
		<div class="thumb">{!item.ImageUrl}</div>
		<div class="name">{!item.Name}</div>
		<div class="department">{!item.Department}</div>
	</div>                                        
</apex:repeat>
The problem is I needed to show FOUR User Cards in one slide. The above method will only do one person per slide. So – with apex:variable and MOD(), we can make make magic happen!

<ul class="birthday-slider">
    <li class="birthday-slide">
        <apex:variable value="{!1}" var="count"/>
        <apex:repeat value="{!People}" var="item"> 
            
            <div class="user-card">
                <div class="thumb">{!item.ImageUrl}</div>
                <div class="name">{!item.Name}</div>
                <div class="department">{!item.Department}</div>
            </div>     
            
            {!MOD(count, 4)} <br/>
            <apex:outputText value="</li><li class='birthday-slide'>" rendered="{!MOD(count, 4) == 0}" escape="false" />
            
            <apex:variable value="{!count + 1}" var="count"/>
        </apex:repeat>
    </li>
</ul>