Kevin Powell - Community•3w ago

CSS how did he do that?

Hello I am wondering how did he do the next and prev buttons to the side of the image? The site is responsive. He used CSS only. The html code is:

<div class="banner">
        <div class="slider">
            <img src="imgs/0.jpg" alt="">
            <img src="imgs/1.jpg" alt="">
            <img src="imgs/2.jpg" alt="">
        </div>
        <div class="arrows">
            <button id="prev"><</button>
            <button id="next">></button>
        </div>
    </div>

<div class="banner">
        <div class="slider">
            <img src="imgs/0.jpg" alt="">
            <img src="imgs/1.jpg" alt="">
            <img src="imgs/2.jpg" alt="">
        </div>
        <div class="arrows">
            <button id="prev"><</button>
            <button id="next">></button>
        </div>
    </div>

20 Replies

Jochem•3w ago

look at the banner and arrows classes in the dev tools

lanszelotOP•3w ago

How I did the CSS is:

.banner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid red;
}

.slider {
    display: flex;
}

.arrows {
    border: 2px solid red;
    position: absolute;
}

.banner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid red;
}

.slider {
    display: flex;
}

.arrows {
    border: 2px solid red;
    position: absolute;
}

arrow width missing this is a video, not a site, so I cannot 🙂 In the video you can see the html, and the JS, but you cannot see the CSS

Jochem•3w ago

This is how I'd do it https://codepen.io/jochemm/pen/JoPpvQv

Jochem

CodePen

buttons to the side

...

lanszelotOP•3w ago

First of all, thank you for your answer. But not good, because the button half out of range

Jochem•3w ago

you mean that they're half on, half off the image in the example?

lanszelotOP•3w ago

Yes, and everithing centered, and responsive, so 800px not good too 🙂

Jochem•3w ago

you can add a padding to the slider if you want, to get the buttons half-off the image:

.slider {
  padding: 0 1rem;
}

.slider {
  padding: 0 1rem;
}

lanszelotOP•3w ago

it is not centered

Jochem•3w ago

you asked about the buttons

lanszelotOP•3w ago

yes, the button center is half in half out, what you wrote is not half

Jochem•3w ago

it's a proof of concept to help you along the way. Set the width of the buttons to some value defined in a variable and the padding to half that variable, then they'll be centered

lanszelotOP•3w ago

and without centering everithing is differrent the button css too

Jochem•3w ago

it's really not, the buttons are only dependent on the contents of the banner class. You can center that however you want

lanszelotOP•3w ago

that is not the rigth way I think

Jochem•3w ago

alright I'll leave someone else to answer then

lanszelotOP•3w ago

If you use my css, what I linked is better sorry I do not want to be bed, I just write it is not what it is slider have to be flex, because there are more images inside, and the arrows are the next/prev images

Jochem•3w ago

Nothing is preventing the use of display: flex on the slider. You asked about the buttons, so I made a minimal example of how you could do that. The fact that there's multiple children in an unrelated element has no effect on the buttons, so I didn't include that. If you want people to work with the exact code you have, provide a fully functioning codepen and ask complete questions also, position: absolute is almost never the better solution

lanszelotOP•3w ago

Yes, I understand. After your, I centered the button, but I think it could be better solution than playing with padding. this is after your code: https://codepen.io/lanszelot/pen/VYZQdpO

Darth Vader

CodePen

buttons to the side

...

Jochem•3w ago

you can use css variables to set the width and padding using the same value and some calc() math:

.banner {
...
  --button-size: 3em;
}
.slider {
...
  padding: 0 calc(var(--button-size) / 2 - 4px);
}
#prev, #next {
    width: var(--button-size);
    height: var(--button-size);
...
}

.banner {
...
  --button-size: 3em;
}
.slider {
...
  padding: 0 calc(var(--button-size) / 2 - 4px);
}
#prev, #next {
    width: var(--button-size);
    height: var(--button-size);
...
}

The -4px is 2x the border size on the buttons, you can also stick that in a variable if you want. ... represents code I just hid for clarity in what I changed

lanszelotOP•3w ago

Yes, this is working well. Thank you so much

Gaming

Programming

CSS how did he do that?

Did you find this page helpful?