Kevin Powell - Community•15mo ago

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•15mo 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•15mo ago

https://sweet-creponne-9e8302.netlify.app/

Christ Church Sedalia

Christ Church Sedalia is a church located in Sedalia, MO.

maxi95.•15mo ago

Thanks for the help! Sadly your slider uses the full screen width and isn't fitted in a max width container

Gaming

Programming

Horizontal Slider in centered Max width container | CSS | HTML