Olá, hoje trago pra vocês uma solução muito interessante para um problema real que tive.
Recebi um layout com um carrosel que tinha 2 linhas e 4 itens em cada linha, ele deveria funcionar como qualquer carrosel, clica em next rola pra esquerda todo carrosel, clica em prev, rola pra direita o grande problema é: NUNCA NA MINHA VIDA EU HAVIA VISTO ALGO ASSIM!
Tudo bem, fui atras disso antes de começar o projeto, achei algumas soluções propondo modificar plugins como o já famoso jCarousel e essa solução aqui! pensei porra! to feito, vai ser essa mesma que vai salvar minha vida.
Mais tinha um grande problema, no layout também havia filtros de categoria e quando filtrava bagunçava todo o esquema de duas linhas que era pra ficar, voltava tudo pra uma linha só, além do mais, não estava organizado como deveria ser
ex:
e era pra ficar assim:
Então, qual foi a minha solução? graças ao @dexfs que me mostrou um site feito com Cycle Plugin que consegui solucionar esse problema
é bem simples, vamos começar pelo loop no WP:
<?php
$query = new WP_Query('posts_per_page=-1');
$i = 1; //essa será nossa variavel chave para efetuar toda magica
if($query->have_posts()): ?>
<div class="box">
<?php while ($query->have_posts()): $query->the_post();?>
// aqui vai o conteudo, ex: um post thumbnail
<?php the_post_thumbnail('carousel');?>
<?php
// agora a mágica para o carossel dar certo com Cycle
if($i % 8 == 0){
echo '</div><div class="box">';
}
$i++;
endwhile;
wp_reset_postdata();
?>
</div>
<?php endif;?>
Entãããão, vejam bem o pequeno e maroto if ali, a cada 8 itens ele vai fechar o div que eu abri antes do while e se por exemplo, na proxima execução tiver menos de 8 itens nosso div.box já estará aberto antes de while e fechado depois não correndo assim o risco de jogar os itens num lugar vazio e fora de contexto.
Ok, agora a parte do plugin, é bem simples, usei esse item que estava no FAQ deles que te diz para usar scrollHorz e fim, todos felizes com um carrosel multilinha no wordpress e que ainda fica organizado de forma decente :p