1

Como colocar 2 imagens ou mais lado a lado, ocupando 100% da página?

    @charset "utf-8";
    * {
      margin: 0;
      padding: 0;
    }
    .galeria {
      background: #FFFFFF;
      width: 100%;
      height: 768px;
      display: inline-block;
      /*overflow: hidden;*/
    }
    .galeria .botoes {
      display: none;
      position: absolute;
    }
    .galeria .botoes a.anterior {
      text-decoration: none;
      width: 30px;
      height: 130px;
      float: left;
      margin-left: 20px;
      background-image: url(imagens/flechae.png);
      background-size: 30px 130px;
    }
    .galeria .botoes a.anterior:hover {
      text-decoration: none;
      width: 30px;
      height: 130px;
      float: left;
      margin-left: 20px;
      background-image: url(imagens/flechaehover.png);
      background-size: 30px 130px;
    }
    .galeria .botoes a.proximo {
      text-decoration: none;
      width: 30px;
      height: 130px;
      float: left;
      margin-left: 20px;
      background-image: url(imagens/flechad.png);
      background-size: 30px 130px;
    }
    .galeria .botoes a.proximo:hover {
      text-decoration: none;
      width: 30px;
      height: 130px;
      float: left;
      margin-left: 20px;
      background-image: url(imagens/flechadhover.png);
      background-size: 30px 130px;
    }
    .galeria ul {
      list-style: none;
      display: table;
      position: relative;
      width: 100%;
      height: 768px;
    }
    .galeria ul li {
      display: inline-block;
      width: 100%;
      height: 768px;
      float: left;
    }
    .galeria ul li img {
      width: 100%;
      height: 100%;
    }
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link href="slider.css" rel="stylesheet" type="text/css">
  <title>Slider Jquery</title>
</head>

<body>
  <div id="galeria" class="galeria">
    <div id="botoes" class="botoes">
      <a href="#" class="anterior"></a>
      <a href="#" class="proximo"></a>
    </div>
    <ul>
      <li>
        <img src="imagens/imagem1.jpg" alt="Imagem 1">
      </li>
      <li>
        <img src="imagens/imagem2.jpg" alt="Imagem 2">
      </li>
      <li>
        <img src="imagens/imagem3.jpg" alt="Imagem 3">
      </li>
    </ul>
  </div>
</body>

</html>

10
  • 1
    Você está fazendo um slider certo? Você está fazendo ele com base em algum javascript? Pois me parece que o problema na verdade envolve também javascript, pois é ele que cria a funcionalidade e dá a característica de "slider". Já sobre o código, qual seria de fato o problema? Seria de apenas colocar 2 imagens por vez na tela? 11/11/2015 às 22:10
  • 1
    Estou fazendo usando jquery, mas preciso colocar as imagens como se fosse display: inline-block, mais preciso que o slider ocupe 100% da pagina e quando coloco 100% as imagens ficam uma embaixo da outra e quando coloco em pixels elas ficam certas uma do lado da outra, essa e a duvida, obrigado 11/11/2015 às 22:13
  • 2
    O problema disso é que o próprio jQuery que vai se encarregar de criar essa estrutura para você, de criar uma "moldura" onde as imagens vão passando pelo "fundo". Você já chegou a aplicar o jQuery para criar o slider? 11/11/2015 às 22:14
  • 1
    Ainda não estava posicionando as imagens para depois aplicar os jquery. Vou tentar aplicar e ver o que acontece, espero que der certo, e obrigado de novo pelas dicas :) 11/11/2015 às 22:22
  • 4
    @LeonardoSilva, elabore uma resposta com a solução do problema ou se não for possível considere remover a pergunta. 12/11/2015 às 11:52

2 Respostas 2

2

Utilize css:

/*Estilo para inserir duas imagens lado a lado ocupando 100% da largura da página*/
li img {
 width:50%;
 height:auto;
 float:left;
}
-1

Use o jQuery para percorrer sua UL e atribuir dinamicamente um Width do tamanho da sua view port no vezes a quantidade de imagens do seu slider. Não vou colocar o código, a logica é bem simples, espero que não venham com paus e pedras pra cima de mim.

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 .