-1

Tenho um slider em css puro e gostaria de deixa-lo responsivo.

<title>Slider UNIP</title>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/vendor/normalize.css">
  <link rel="stylesheet" href="../../dist/gallery.prefixed.css">
  <link rel="stylesheet" href="../../dist/gallery.theme.css">
</head>
<body>

  <div class="gallery items-3">
  <div id="item-1" class="control-operator"></div>
  <div id="item-2" class="control-operator"></div>
  <div id="item-3" class="control-operator"></div>

  <figure class="item">
    <img src="C:\Users\jose\Desktop\css\gallery-css-master\examples\standard\agua1.jpg"/>
  </figure>

  <figure class="item">
    <img src="C:\Users\jose\Desktop\css\gallery-css-master\examples\standard\agua3.jpg"/>
  </figure>

  <figure class="item">
    <img src="C:\Users\jose\Desktop\css\gallery-css-master\examples\standard\agua2.png"/>
  </figure>

  <div class="controls">
    <a href="#item-1" class="control-button">•</a>
    <a href="#item-2" class="control-button">•</a>
    <a href="#item-3" class="control-button">•</a>

  </div>
</div>
</body>
</html>
1
  • Amigo, você possuí algum exemplo para podermos ajudar? Commented 7/05/2016 às 20:17

1 Resposta 1

0

Cria uma div entre as imagens do slider ocupando toda tela com width: 100%, e depois eh só por para cada slider ocupar 33% da largura pai. No mobile, recomenda-se a imagem ocupar toda tela. Daí vai p outra questão de viewport, @mediaqueries.

<div class="sliders">
    <figure class="slide-item"><img src="" alt=""></figure>
    <figure class="slide-item"><img src="" alt=""></figure>
    <figure class="slide-item"><img src="" alt=""></figure>
    </div>

.sliders { width: 100% }
.sliders figure { width: 32%; margin-right: 1%; float: left }
.sliders figure img { width: 100% }

Aí vai de acordo de quantos sliders você quer no container.

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