Carousel bootstrap with two items upright

Asked

Viewed 616 times

1

The challenge is this: Make a Carousel, using the Bootstrap, which displays two items at a time, aligned vertically. Follows an outline of the idea:

inserir a descrição da imagem aqui

I found some examples of Carousel using multiple items, but not vertically aligned.

http://www.bootply.com/94444

I tried to implement and I couldn’t.

Someone gives a force?

javascript html css twitter-bootstrap front-end

3 answers

1

  • 2

    Hello Otto, try to complement a little more the answer. Link responses may go down and invalidate your response to other people searching for the same topic.

  • 1

    beauty master @Caputo

1

I used a <div class="row"> to solve this problem.

Code snippet for the 7th 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>

Example and code: http://www.bootply.com/SV7GR796fg

  • From what I saw in the example this horizontal not vertical

  • @Otto is partially correct as long as all items follow the implementation of item 7. Partly because I explained in the question: "display two items at a time aligned vertically". What people are putting are two elements within the same item. This is not cool, because the back end will loop on top of the item element.

1

You can use the grid techniques within the items that Carousel works correctly.

Example

  • The comment I made in Giuliano’s reply serves your example as well, but THANK YOU VERY much for the feeling, and if you still know how to help me I thank you twice. :)

Browser other questions tagged javascript html css twitter-bootstrap front-end

You are not signed in. Login or sign up in order to post.