Carousel responsivo

[allex_carvalho 124]

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.

[celsomtrindade 2]

Não sei se vai ser algo muito útil, mas...

Quando eu faço alguma parte do site responsive, nesse caso o carousel (vou me basear em um projeto recente que fiz).

Eu particularmente trabalho com o width em % e o height automatico, ou então com um max-height e overflow vertical. Dependendo do tipo de conteúdo, ele fica bacana.

 

Depois eu trabalho com apenas 1 verificação de resolução, para que quando fique em mobile ou tablet, ocupe uma largura maior (digamos 80% do width, já que no mobile o foco deve ser mais o conteúdo e não outros elementos de layout sem importância). Ou até mesmo dando um hidden para as 2 últimas <li> diminuindo um pouco a quantidade de conteúdo. Mas tudo depende do foco, projeto, etc.

 

Mas acho que se for modificar mais a questão do layout, ai vai ter que ser com @media mesmo.

 

Apenas uma dica =D

[allex_carvalho 124]

Então é como pensei mesmo, montar condições no CSS. Só consegui imaginar esta forma.