Horizontal Slider in centered Max width container | CSS | HTML

Hello guys! I had a little chat with Kevin and he told me to ask my question here. See the question below please. I'm currently trying to achieve the slider that you can see in the image below. It comes with some special requirements: - Red lines indicate the max width container at the image - It needs to be aligned with the centered max width container from section one - It also need to overflow to the right, till the end of the screen - When scrolling through the items it should not overlap the "Work" heading but go underneath it. - When scrolling to the end it should stop at the right end of the max width container - In the responsive MOBILE version the heading doesn't rotate anymore and it is placed before the header. I'm struggling with this for quit some time, also tried to do some research and found the following Article https://ryanmulligan.dev/blog/x-scrolling-centered-max-width-container/ . I played with the Code Pen example https://codepen.io/hexagoncircle/pen/gOWjwme from the Article but can't get it to work, when i try to add the heading next to the slider. Does anybody know a solution for that? I would appreciate if NO JAVASCRIPT is included. My code looks something like that.
<section id="home"></section>
<section id="work">
<div class="flex flex-row">
<h1>Work</h1>
<div id="slider">...</div>
</div>
</section>
<section id="home"></section>
<section id="work">
<div class="flex flex-row">
<h1>Work</h1>
<div id="slider">...</div>
</div>
</section>
[2]: https://i.stack.imgur.com/ZdhsB.png [3]: https://i.stack.imgur.com/yEVpN.png
Horizontal Scrolling in a Centered Max-Width Container | Ryan Mulligan
Applying modern CSS techniques to align the start position of a horizontal scrolling gallery to a parent container's max-width while allowing its overflow to span the entire viewport.
Ryan Mulligan
CodePen
Horizontal scrolling in a centered max-width container
Updated and explained in this blog post 🙌 Aligning the start pos...
3 Replies
vince
vince17mo ago
I dont think this is exactly what you're looking for but I did something kind of similar in my one site if you want to see how I did it
vince
vince17mo ago
Christ Church Sedalia
Christ Church Sedalia
Christ Church Sedalia is a church located in Sedalia, MO.
maxi95.
maxi95.OP17mo ago
Thanks for the help! Sadly your slider uses the full screen width and isn't fitted in a max width container
Want results from more Discord servers?
Add your server