I'm using the bootstrap 3 framework and I've implemented an horizontal carousel which displays 4 items at a time. So we have 4 items wrapped in a container and when we click on left or right it display 4 new items. The problem for me is that in order to get it works, the first wrapping container must have an "active" class. This is where I block. Take a look at the following code that's working fine, I mean I can see the loop working fine with the Chrome inspector but nothing will display until I had the class "active" to the very first container :
<?php $count = 0; query_posts('cat=4'); if(have_posts()) : while(have_posts()) : the_post(); $open = !($count%4) ? '<div class="item"><ul class="row list-unstyled">' : ''; $close = !($count%4) && $count ? '</ul></div>' : ''; echo $close.$open; ?> <li class="col-sm-3"><a href="#"><img class="img-responsive" src="http://placehold.it/313x250" alt="Image"></a></li> <?php $count++; endwhile; endif; echo $count ? '</ul></div>' : ''; ?>
The class needs to be added in the $open var next to the class "item" of the opening div.