1

O desafio é o seguinte: Fazer um Carousel, usando o Bootstrap, que exiba dois itens por vez, alinhados verticalmente. Segue um esboço da ideia:

inserir a descrição da imagem aqui

Encontrei alguns exemplos de Carousel usando múltiplos itens, mas não alinhados verticalmente.

http://www.bootply.com/94444

Tentei implementar e não consegui.

Alguém da uma força?

3 Respostas 3

1

Você pode utilizar este plugin que resolve seu problema:

https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

2
  • 2
    Olá Otto, tente complementar um pouco mais a resposta. As respostas por link podem sair do ar e invalidar sua resposta para outras pessoas que pesquisem sobre o mesmo tema.
    – Caputo
    Commented 25/09/2014 às 21:12
  • 1
    beleza mestre @Caputo
    – Otto
    Commented 25/09/2014 às 21:12
1

Utilizei um <div class="row"> para resolver esse problema.

Trecho do código para o 7º item:

<div class="item">
  <div class="col-md-4">
    <div class="row">
      <div class="col-md-12"><a href="#"><img src="http://placehold.it/500x250/993399/fff&amp;text=7_1" class="img-responsive"></a></div>
    </div>
    <div class="row">
      <div class="col-md-12"><a href="#"><img src="http://placehold.it/500x250/339933/fff&amp;text=7_2" class="img-responsive"></a></div>
    </div>
  </div>
</div>

Exemplo e código: http://www.bootply.com/SV7GR796fg

2
  • Pelo que vi no exemplo esta na horizontal não na vertical
    – Otto
    Commented 25/09/2014 às 21:11
  • @Otto está parcialmente correto desde que todos os itens sigam a implementação do item 7. Parcialmente porque eu expliquei na pergunta: "exiba dois itens por vez alinhados verticalmente". O que o pessoal ta colocando são dois elementos dentro de um mesmo item. Isso não fica legal, pois o back-end vai fazer o loop em cima do elemento item. Commented 26/09/2014 às 1:07
1

Você pode usar as técnicas de grid dentro dos itens que o Carousel funciona corretamente.

Exemplo

1
  • O comentário que fiz na resposta do Giuliano serve pro teu exemplo também, mas MUITO obrigado pela foça, e se ainda assim souber como me ajudar eu agradeço em dobro. :) Commented 26/09/2014 às 1:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .