0

Gostaria que fosse exibida algumas imagens lado a lado, como segue o modelo abaixo, poderiam me indicar a melhor forma de fazer?

Já tentei fazer com BootStrap, mas só consigo fazer aparecer uma imagem por vez.

inserir a descrição da imagem aqui

3 Respostas 3

1

oi CA_93 tenta criar essa estrutura do bootstrap 3 no teu codigo:

<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">img-1</div>
    <div class="col-md-4">img-2</div>
    <div class="col-md-4">img-3</div>
  </div>
</div>
</body>

tu também pode da uma olhada na documentação: (http://getbootstrap.com/css/) tem também esse canal no youtube, vai te ajudar: (https://www.youtube.com/watch?v=8sU-IVaQYgk&list=PLd4yfya-3PIomj2O-W0s9A-0i1ThWJncj)

1

Segue abaixo um exemplo com Bootstrap.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- - - - - - - - - - - - - - - -->

<div class="container">    
    <div class="row">                   
        <div class="col-sm-4"><img src="http://placehold.it/400x400" style="max-height:220px" /></div>                       
        <div class="col-sm-4"><img src="http://placehold.it/400x400" style="max-height:220px" /></div>   
        
        <div class="col-sm-4"><img src="http://placehold.it/400x400" style="max-height:220px" /></div> 
	</div>
</div>

0

Você aqui tem duas opções, modificar o Carrossel do Bootstrap para dá suporte a múltiplos frames.

Você pode utilizar a implementação do seguinte CodeIO para isto.

A segunda opção, é utilizar o SlickJS ou outra lib que dê suporte à este tipo de implementação.:

$('.responsive').slick({
  dots: true,
  infinite: true,
  arrows: true,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 992,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 576,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});
.responsive {
  box-sizing: box-border;
}

.responsive div {
  height: 300px;
  background-image: url('http://placehold.it/300x300');
  background-size: calc(100% - 10px);
  background-position: center;
  background-repeat: no-repeat;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

<div class="responsive">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

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 .