@Persocon

Carrosel Multi Linhas com Cycle Plugin no WordPress

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

Sobre Pedro Costa Neves

Webdesigner, Wordpress Ninja, fundador do http://persocon.org e do http://geek-candy.com. Sócio, Co-fundador, Diretor de Arte, Web Developer em !Drop Studio e está procurando emprego em Chapecó se alguem souber avise-me. Você pode entrar em contato comigo através da página de contato neste site ou pelo email neo[at]persocon.org.