maxi95. Posts - Answer Overflow

maxi95.

•Created by maxi95. on 8/22/2023 in #front-end

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

4 replies

Gaming

Programming