CSS-only carousel: problems centering and fixing size

Asked

Viewed 2,477 times

3

I have a carousel created with only CSS, but I have identified some difficulties. All images are in the 4:3 ratio and may have until 640x480 px (i.e., may be less than this value), so:

  • I cannot center the arrows of next and previous;
  • Arrows cannot be "moving" on the screen (if the next image is smaller than the previous one, arrows should not change position);
  • I don’t know how to fix the size of the carousel according to the largest image used at the time.

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 someone help me find a solution or at least one balancing in the measures?

html css html5 css3 carousel

  • It must stay outside the image or it can stay inside on the sides ?

  • Friend, can you make an https://jsfiddle.net and put in the Carousel plugin that you use? So it’s faster to help you..

  • @Magichat are you talking about arrows? They can stay inside the images, as long as they do not change places when changing the image.

  • @Zenojunior not using plugin...

2 answers

1


Something close to that? I owe you the question of the biggest image. 

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

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

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

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>

  • Sure, you can do that, but for me it’s still not the ideal solution. I was thinking about fixing the size of the carousel, because (in my opinion) it is better to leave the big bloc than to stretch the image, even if they have the same ratio, depending on the size of the image it can get too weird to see/understand rs As I can’t control the minimum size of the images that will enter, it is complicated

  • 1

    I will wait to close the question, I still have hopes that someone will come up with a top solution! rs

Browser other questions tagged html css html5 css3 carousel

You are not signed in. Login or sign up in order to post.