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.
[2]: https://i.stack.imgur.com/ZdhsB.png
[3]: https://i.stack.imgur.com/yEVpN.png
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.
[2]: https://i.stack.imgur.com/ZdhsB.png
[3]: https://i.stack.imgur.com/yEVpN.png
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.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
