Carousel responsivo

Bom dia,

Estou usando o grid desenvolvido pelo William Bruno para site responsivo. Preciso desenvolver um carousel onde será exibido 4 em 4 itens quando o site for largura máxima (1170px). Geralmente desenvolvo definindo uma div maior com largura fixa e insiro os itens dentro dela, desta forma, só movo o conteúdo ajustando via margin (left / right).

HTML:

<div class="column-full content cf">
 <div id="carousel">
 <h2 class="titulo fleft">Produtos</h2>
 <button id="prev" class="inicio_fim"></button>
 <ul id="recebe_carousel">
 <li class="column-quarter">
 <a href="#" title="Computador Intel I3">
 <img src="uploads/produtos/computador.png" alt="Computador Intel I3" />
 <h2>Computador Intel I3</h2>
 <p>4bg 500gb Monitor 21,5" LED</p>
 </a>
 </li>
 <li class="column-quarter">
 <a href="#" title="Tablet Galaxy S">
 <img src="uploads/produtos/celular.png" alt="Tablet Galaxy S" />
 <h2>Tablet Galaxy S</h2>
 <p>4bg 500gb Monitor 21,5" LED</p>
 </a>
 </li>
 <li class="column-quarter">
 <a href="#" title="Mini CPU">
 <img src="uploads/produtos/cpu.png" alt="Mini CPU" />
 <h2>Mini CPU</h2>
 <p>4bg 500gb Monitor 21,5" LED</p>
 </a>
 </li>
 <li class="column-quarter">
 <a href="#" title="Impressora a Laser">
 <img src="uploads/produtos/impressora.png" alt="Impressora a Laser" />
 <h2>Impressora a Laser</h2>
 <p>4bg 500gb Monitor 21,5" LED</p>
 </a>
 </li>
 </ul>
 <button id="next"></button>
 </div><!-- carousel -->
</div><!-- column-full -->

CSS:

#carousel {
 width: 100%;
 float: left;
 position: relative;
}

#carousel .inicio_fim {

 display: none;
}

#carousel #prev, #carousel #next {

 width: 17px; height: 29px;
 float: left;
 position: absolute;
 top: 50%;
 cursor: pointer;
}

#carousel #prev {

 left: 0;
 background: url("../img/retornar.png") no-repeat;
}

#carousel #next {

 right: 0;
 background: url("../img/avancar.png") no-repeat;
}
#recebe_carousel {
 width: 100%;
 float: left;
}

#recebe_carousel li h2 {

 color: #000;
 font-size: 19px;
 font-weight: normal;
 margin-top: 5px;
}

#recebe_carousel li p {

 color: #606062;
 font-size: 16px;
}

#recebe_carousel li a:hover {

 text-decoration: none;
}

Gostaria de saber se tem uma forma mais pratica de montar este carousel sem ser fazendo condições para cada resolução.

Obrigado pela atenção.