Carousel with only CSS: problems with centering and setting size

Navigation
3

I have a carousel created with only CSS, but I have identified some difficulties. All images are in the 4: 3 aspect ratio and can have up to 640x480 px (that is, they may be smaller than this value), so:

  • I can not center the next and previous arrows;
  • The arrows can not be "sambando" on the screen (if the next image is smaller than the previous one, the arrows should not change position);
  • I do not know how to set the size of the carousel according to the largest image currently used.

The code: 

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>

Can anyone help me find a solution or at least a balance in the measurements?

    
asked by anonymous 12.11.2016 / 20:26

2 answers

1
___ erkimt ___ Carousel with only CSS: problems with centering and setting size ______ qstntxt ___

I have a carousel created with only CSS, but I have identified some difficulties. All images are in the 4: 3 aspect ratio and can have up to 640x480 px (that is, they may be smaller than this value), so:

  • I can not center the next and previous arrows;
  • The arrows can not be "sambando" on the screen (if the next image is smaller than the previous one, the arrows should not change position);
  • I do not know how to set the size of the carousel according to the largest image currently used.

The code: 

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>

Can anyone help me find a solution or at least a balance in the measurements?

    
______ ___ azszpr301158

Something close to that? I'm gonna owe you the big picture issue. 

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>
    
______ azszpr165501 ___

The fastest way to meet your request is by setting a size for the images:

%pre%

It would look like this:

%pre% %pre%
    
___
23.05.2018 / 12:59
0

The fastest way to meet your request is by setting a size for the images: 

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

It would look like this: 

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>
    
15.11.2016 / 00:26
Storing a character in the vector Query values with 0 included in count () even if they do not have values