3

Tenho um carrossel criado com apenas CSS, mas tenho identificado algumas dificuldades. Todas as imagens são na proporção 4:3 e podem ter até 640x480 px (ou seja, podem ser menores que esse valor), por isso:

  • Não consigo centralizar as setas de próximo e anterior;
  • As setas não podem ficar "sambando" na tela (se a próxima imagem for menor que a anterior, as setas não devem mudar de posição);
  • Não sei como fixar o tamanho do carrossel de acordo com a maior imagem utilizada no momento.

O código:

html {
  font-size: 10px;
}
body {
  padding: 2rem;

  background: #F8F8F8;

  font-size: 16px;
}

.wrap {
  max-width: 70rem;
  margin: auto;
  padding: 2rem;

  background: #FFF;
}
.carousel {
  position: relative;

  display: -webkit-box;
  display: flex;

  max-width: 64rem;
  min-height: 40rem;
  margin: auto;

  background: red;

  -webkit-box-pack: center;
  justify-content: center;
}
.group {
  display: -webkit-box;
  display: flex;

  background: blue;

  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
}
.group input {
  position: absolute;
  top: -100%;
  left: -100%;

  display: none;
}
.group input ~ .content {
  /* tentar fixar tamanho aqui */
  display: none;

  -webkit-box-ordinal-group: 3;
  order: 2;
}
div.group input:checked ~ div.content {
  display: block;
}
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
  display: block;
}
div.group label {
  top: 50%;

  display: none;

  width: 50px;
  height: 50px;

  border: solid 1px black;

  background-color: #69C;

  transform: translateY(-50%);
}
img {
  width: 100%;
  height: 100%;
}
label {
  margin: 125px 0 0 0;

  font-size: 4em;
}
label.previous {
  padding: 0 0 30px 5px;

  -webkit-box-ordinal-group: 2;
  order: 1;
}
label.next {
  padding: 0 5px 25px 0;

  text-align: right;

  -webkit-box-ordinal-group: 4;
  order: 3;
}
<!DOCTYPE html>
<html>

<head>
    <title>Teste 3</title>
    <link rel="stylesheet" type="text/css" href="teste3.css">
    <meta charset="utf-8">
</head>

<body>
    <div class="wrap">
        <div class="carousel">
            <div class="group">
                <input type="radio" name="test" id="0" value="0">
                <label for="4" class="previous">&lt;</label>
                <label for="1" class="next">&gt;</label>
                <div class="content">
                    <img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png" width="200" height="286">
                </div>
            </div>
            <div class="group">
                <input type="radio" name="test" id="1" value="1">
                <label for="0" class="previous">&lt;</label>
                <label for="2" class="next">&gt;</label>
                <div class="content">
                    <img src="https://www.ausmedia.com.au/Mmedia/4TO3.gif" width="200" height="139">
                </div>
            </div>
            <div class="group">
                <input type="radio" name="test" id="2" value="2">
                <label for="1" class="previous">&lt;</label>
                <label for="3" class="next">&gt;</label>
                <div class="content">
                    <img src="http://www.cegepsherbrooke.qc.ca/~cpi/images/photo_4-3.jpg" width="140" height="200">
                </div>
            </div>
            <div class="group">
                <input type="radio" name="test" id="3" value="3" checked="">
                <label for="2" class="previous">&lt;</label>
                <label for="4" class="next">&gt;</label>
                <div class="content">
                    <img src="http://www.projectorcentral.com/images/articles/4-3%20Bristlecone%20Pines.jpg" width="200" height="287">
                </div>
            </div>
            <div class="group">
                <input type="radio" name="test" id="4" value="4">
                <label for="3" class="previous">&lt;</label>
                <label for="0" class="next">&gt;</label>
                <div class="content">
                    <img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-for-monitor-4-3-almost-square-awesome/wallpaper-for-monitor-4-3-almost-square-awesome-951.jpg" width="96" height="139">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Alguém pode me ajudar a encontrar uma solução ou pelo menos um equilíbrio nas medidas?

4
  • Ele obrigatoriamente tem de ficar fora da imagem ou pode ficar dentro nas laterais ?
    – MagicHat
    13/11/2016 às 3:05
  • Amigo, consegue fazer um jsfiddle.net e colocar o plugin do Carrossel que você utiliza? Assim fica mais rápido para te ajudar.. 13/11/2016 às 16:19
  • @MagicHat você tá falando das setinhas? Elas podem ficar dentro das imagens, desde que não mudem de lugar ao mudar a imagem. 14/11/2016 às 19:03
  • @ZenoJunior não tô usando plugin... 14/11/2016 às 19:04

2 Respostas 2

1

Algo próximo a isso? Vou ficar te devendo a questão da maior imagem.

html {
  font-size: 10px;
}
body {
  padding: 2rem;

  background: #F8F8F8;

  font-size: 16px;
}

.wrap {
  max-width: 70rem;
  margin: auto;
  padding: 2rem;

  background: #FFF;
}
.carousel {
  position: relative;

  display: -webkit-box;
  display: flex;

  max-width: 64rem;
  min-height: 40rem;
  margin: auto;

  background: red;

  -webkit-box-pack: center;
  justify-content: center;
}
.group {
  display: -webkit-box;
  display: flex;

  background: blue;

  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
}
.group input {
  position: absolute;
  top: -100%;
  left: -100%;

  display: none;
}
.group input ~ .content {
  /* tentar fixar tamanho aqui */
  display: none;

  -webkit-box-ordinal-group: 3;
  order: 2;
}
div.group input:checked ~ div.content {
  display: block;
}
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
  display: block;
}
div.group label {
  display: none;

  width: 50px;
  height: 50px;

  border: solid 1px black;

  background-color: #69C;

  transform: translateY(-50%);
}
img {
  width: 100%;
  height: 100%;
}
label {
  margin: 125px 0 0 0;

  font-size: 4em;
}
label.previous {
  padding: 0 0 30px 5px;

  -webkit-box-ordinal-group: 2;
  order: 1;
}
label.next {
  padding: 0 5px 25px 0;

  text-align: right;

  -webkit-box-ordinal-group: 4;
  order: 3;
}

.previous{
  position:absolute;
  left:0px;
  bottom:0px;
  top: calc(50% - 120px);
  top: calc(50% - 120px);
}
.next{
  position:absolute;
  right:0px;
  bottom:0px;
  top: calc(50% - 120px);
  
}
<!DOCTYPE html>
<html>

<head>
    <title>Teste 3</title>
    <link rel="stylesheet" type="text/css" href="teste3.css">
    <meta charset="utf-8">
</head>

<body>
    <div class="wrap">
        <div class="carousel">
            <div class="group">
                <input type="radio" name="test" id="0" value="0">
                <label for="4" class="previous">&lt;</label>
                <label for="1" class="next">&gt;</label>
                <div class="content">
                    <img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png" width="200" height="286">
                </div>
            </div>
            <div class="group">
                <input type="radio" name="test" id="1" value="1">
                <label for="0" class="previous">&lt;</label>
                <label for="2" class="next">&gt;</label>
                <div class="content">
                    <img src="https://www.ausmedia.com.au/Mmedia/4TO3.gif" width="200" height="139">
                </div>
            </div>
            <div class="group">
                <input type="radio" name="test" id="2" value="2">
                <label for="1" class="previous">&lt;</label>
                <label for="3" class="next">&gt;</label>
                <div class="content">
                    <img src="http://www.cegepsherbrooke.qc.ca/~cpi/images/photo_4-3.jpg" width="140" height="200">
                </div>
            </div>
            <div class="group">
                <input type="radio" name="test" id="3" value="3" checked="">
                <label for="2" class="previous">&lt;</label>
                <label for="4" class="next">&gt;</label>
                <div class="content">
                    <img src="http://www.projectorcentral.com/images/articles/4-3%20Bristlecone%20Pines.jpg" width="200" height="287">
                </div>
            </div>
            <div class="group">
                <input type="radio" name="test" id="4" value="4">
                <label for="3" class="previous">&lt;</label>
                <label for="0" class="next">&gt;</label>
                <div class="content">
                    <img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-for-monitor-4-3-almost-square-awesome/wallpaper-for-monitor-4-3-almost-square-awesome-951.jpg" width="96" height="139">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

0

A forma mais rápida de atender ao que solicita é definindo uma tamanho para as imagens:

img
{
    width: 514px;
    height:400px;
}

Ficaria assim :

html {
  font-size: 10px;
}
body {
  padding: 2rem;

  background: #F8F8F8;

  font-size: 16px;
}

.wrap {
  max-width: 70rem;
  margin: auto;
  padding: 2rem;

  background: #FFF;
}
.carousel {
  position: relative;

  display: -webkit-box;
  display: flex;

  max-width: 64rem;
  min-height: 40rem;
  margin: auto;

  background: red;

  -webkit-box-pack: center;
  justify-content: center;
}
.group {
  display: -webkit-box;
  display: flex;

  background: blue;

  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
}
.group input {
  position: absolute;
  top: -100%;
  left: -100%;

  display: none;
}
.group input ~ .content {
  /* tentar fixar tamanho aqui */
  display: none;

  -webkit-box-ordinal-group: 3;
  order: 2;
}
div.group input:checked ~ div.content {
  display: block;
}
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
  display: block;
}
div.group label {
  top: 50%;

  display: none;

  width: 50px;
  height: 50px;

  border: solid 1px black;

  background-color: #69C;

  transform: translateY(-50%);
}
img
{
    width: 514px;
    height:400px;
}
label {
  margin: 125px 0 0 0;

  font-size: 4em;
}
label.previous {
  padding: 0 0 30px 5px;

  -webkit-box-ordinal-group: 2;
  order: 1;
}
label.next {
  padding: 0 5px 25px 0;

  text-align: right;

  -webkit-box-ordinal-group: 4;
  order: 3;
}
<!DOCTYPE html>
<html>

<head>
    <title>Teste 3</title>
    <link rel="stylesheet" type="text/css" href="teste3.css">
    <meta charset="utf-8">
</head>

<body>
    <div class="wrap">
        <div class="carousel">
            <div class="group">
                <input type="radio" name="test" id="0" value="0">
                <label for="4" class="previous">&lt;</label>
                <label for="1" class="next">&gt;</label>
                <div class="content">
                    <img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png" width="200" height="286">
                </div>
            </div>
            <div class="group">
                <input type="radio" name="test" id="1" value="1">
                <label for="0" class="previous">&lt;</label>
                <label for="2" class="next">&gt;</label>
                <div class="content">
                    <img src="https://www.ausmedia.com.au/Mmedia/4TO3.gif" width="200" height="139">
                </div>
            </div>
            <div class="group">
                <input type="radio" name="test" id="2" value="2">
                <label for="1" class="previous">&lt;</label>
                <label for="3" class="next">&gt;</label>
                <div class="content">
                    <img src="http://www.cegepsherbrooke.qc.ca/~cpi/images/photo_4-3.jpg" width="140" height="200">
                </div>
            </div>
            <div class="group">
                <input type="radio" name="test" id="3" value="3" checked="">
                <label for="2" class="previous">&lt;</label>
                <label for="4" class="next">&gt;</label>
                <div class="content">
                    <img src="http://www.projectorcentral.com/images/articles/4-3%20Bristlecone%20Pines.jpg" width="200" height="287">
                </div>
            </div>
            <div class="group">
                <input type="radio" name="test" id="4" value="4">
                <label for="3" class="previous">&lt;</label>
                <label for="0" class="next">&gt;</label>
                <div class="content">
                    <img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-for-monitor-4-3-almost-square-awesome/wallpaper-for-monitor-4-3-almost-square-awesome-951.jpg" width="96" height="139">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

2
  • Com certeza, dá pra fazer isso, só que pra mim ainda não é a solução ideal. Eu estava pensando em fixar o tamanho do carrossel, porque (na minha opinião) é melhor deixar o bloquinho grandinho do que esticar a imagem, mesmo que elas tenham a mesma proporção, dependendo do tamanho da imagem ela pode ficar esquisita demais pra ver/entender rs Como não posso controlar o tamanho mínimo das imagens que vão entrar, fica complicado 14/11/2016 às 23:56
  • 1
    Vou esperar para fechar a questão, ainda tenho esperanças que alguém virá com uma solução top! rs 14/11/2016 às 23:57

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 .