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>

Jochem•1/9/25, 12:54 PM

look at the and classes in the dev tools

lanszelotOP•1/9/25, 12:56 PM

How I did the CSS is:

arrow width missing

JJochem look at the `banner` and `arrows` classes in the dev tools

lanszelotOP•1/9/25, 12:57 PM

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•1/9/25, 1:02 PM

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

CodePenJochem

buttons to the side

...

lanszelotOP•1/9/25, 1:03 PM

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

Jochem•1/9/25, 1:04 PM

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

lanszelotOP•1/9/25, 1:05 PM

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

Jochem•1/9/25, 1:08 PM

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

lanszelotOP•1/9/25, 1:08 PM

it is not centered

Jochem•1/9/25, 1:09 PM

you asked about the buttons

lanszelotOP•1/9/25, 1:09 PM

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

Jochem•1/9/25, 1:10 PM

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•1/9/25, 1:10 PM

and without centering everithing is differrent the button css too

Jochem•1/9/25, 1:11 PM

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

JJochem it's a proof of concept to help you along the way. Set the width of the buttons ...

lanszelotOP•1/9/25, 1:11 PM

that is not the rigth way I think

Jochem•1/9/25, 1:11 PM

alright

Jochem•1/9/25, 1:11 PM

I'll leave someone else to answer then

lanszelotOP•1/9/25, 1:12 PM

If you use my css, what I linked is better

lanszelotOP•1/9/25, 1:12 PM

sorry I do not want to be bed, I just write it is not what it is

lanszelotOP•1/9/25, 1:18 PM

slider have to be flex, because there are more images inside, and the arrows are the next/prev images

Llanszelot slider have to be flex, because there are more images inside, and the arrows are...

Jochem•1/9/25, 1:38 PM

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

Jochem•1/9/25, 1:39 PM

also, is almost never the better solution

lanszelotOP•1/9/25, 1:43 PM

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

CodePenDarth Vader

buttons to the side

...

Jochem•1/9/25, 1:48 PM

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

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•1/9/25, 2:03 PM

Yes, this is working well.

lanszelotOP•1/9/25, 2:03 PM

Thank you so much