0

Estou criando um site mobile com design responsivo.

Dentro de uma div tenho um slideshow que mostra imagens 300x300, eu preciso tornar esse slideshow responsivo sem mexer nos atributos width e height dele. O código é mais ou menos esse:

<div id="div-de-fora">
    <div id="div-do-slideshow">
        [elementos do slideshow]
    </div>
</div>


//css
#div-do-slideshow{
    width:300px;
}

#div-de-fora{
    ?????
}

Mexer no width do #div-do-slidshow não é possível, visto que ele usa o atributo left para trocar as imagens.

É possível alterar a exibição do slideshow usando apenas CSS, parâmetros, etc. No #div-de-fora?

Já tentei usar iframe e FlexBox mas não tive sucesso.

Nesse projeto não estou usando jQuery, a solução deve usar apenas HTML, CSS e JavaScript puro.

3 Respostas 3

1

Olá. É possível que você consiga o que quer invertendo a ordem de "prioridade". Para tornar o slideshow responsivo eu recomendo não deixá-lo com valores exatos (como 300px). Eu faria algo mais ou menos assim (se eu entendi bem...)

HTML:

<div id="div-de-fora">
    <div id="div-do-slideshow">
       <div class="slideshow-wrapper">
           [elementos do slideshow]
       </div>
    </div>
</div>

Sempre é bom você manter o elemento que manipula o slideshow o mais livre possível de interferências de CSS e Javascript. Nesse caso, eu usaria o .slideshow-wrapper para executar o slide, e a div #div-do-slideshow para receber a responsividade.

No CSS, eu faria assim:

#div-de-fora {
  width: 100%; /* ou 300px */
  height: 300px;
}

#div-do-slideshow {
  width: 100%;
  height: 100%;
  position: relative;
}

#div-do-slideshow .slideshow-wrapper {
  width: 100%;
  height: 100%;
}

#div-do-slideshow .slideshow-wrapper img {
  width: 100%;
  height: auto;
  /* redimensiona imagens automaticamente */
}

Dessa maneira, você manipula com valores exatos somente a #div-de-fora, podendo até passar valores de width/height por Javascript. O restante dentro dela vai seguir livremente.

Seria interessante você mostrar seu código do slider.

1

Coloque essa linha abaixo dentro da tag <head> de seu html

Se você quer seu site responsivo , isso resume tudo.

talvez funcione, mas se não ficar do jeito que você quer, você pode alterar o CSS parar % em vez de px

      <meta name="viewport" content="width=device-width, initial-scale=1">

2
  • Além da viewport, é bom colocar um elemento CSS assim: * { max-width: 100%; } que vai assegurar que nenhum elemento ultrapasse o tamanho do elemento-pai.
    – LipESprY
    22/04/2017 às 18:48
  • viewport é uma mão na luva kkk, mas realmente tem que alterar os px para % 22/04/2017 às 18:53
1

Quando se trata de Layout responsivo, vale a pena tratar basicamente o seguinte:

Viewport:

O viewport é a área onde seu website aparece. É a área branca da janela quando você abre o browser. O viewport sempre vai ter o tamanho da janela. Mas a forma como os elementos são renderizados vai depender bastante do dispositivo.

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=10, minimum-scale=1.0">

CSS - box-sizing:

Quando você define box-sizing: border-box; em um elemento, os valores do padding e do border não são adicionados em sua largura.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

CSS - max-width:

max-width irá limitar o tamanho do elemento baseando-se no elemento-pai.

* { max-width: 100%; }

No caso do Layout responsivo, não queremos que nada ultrapasse o tamanho da tela, né?!


Agora é só aplicar tudo isso ao seu projeto e "voalá"!

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 .