<div style="position: relative">
<button class="OverflowContainer-button OverflowContainer-button--previous js-overflow-container-previous">
<span class="screenreader">
Click to go back
</span>
<span class="icon _arrow-left _before"></span>
</button>
<div id="" class="OverflowContainer js-overflow-container " style="">
<div id="" class="Card _shadow u-space-margin-around-300" style="">
<div class="Media _16x9" style="">
<img id="" class="image " alt="" style="" src="http://lorempixel.com/600/400/animals?34457" />
</div>
<div class="Card-body">
<h3 class=" " style="">
ut qui saepe
</h3>
<p id="" class="">
Error impedit qui exercitationem ipsa cumque.
</p>
</div>
</div>
<div id="" class="Card _shadow u-space-margin-around-300" style="">
<div class="Media _16x9" style="">
<img id="" class="image " alt="" style="" src="http://lorempixel.com/600/400/business?33462" />
</div>
<div class="Card-body">
<h3 class=" " style="">
veniam est quam
</h3>
<p id="" class="">
Sunt amet magni.
</p>
</div>
</div>
<div id="" class="Card _shadow u-space-margin-around-300" style="">
<div class="Media _16x9" style="">
<img id="" class="image " alt="" style="" src="http://lorempixel.com/600/400/people?27637" />
</div>
<div class="Card-body">
<h3 class=" " style="">
et magnam libero
</h3>
<p id="" class="">
Aut laboriosam quia.
</p>
</div>
</div>
<div id="" class="Card _shadow u-space-margin-around-300" style="">
<div class="Media _16x9" style="">
<img id="" class="image " alt="" style="" src="http://lorempixel.com/600/400/business?5809" />
</div>
<div class="Card-body">
<h3 class=" " style="">
quam et pariatur
</h3>
<p id="" class="">
Doloremque perspiciatis doloremque quidem ipsam vel harum suscipit ut mollitia.
</p>
</div>
</div>
<div id="" class="Card _shadow u-space-margin-around-300" style="">
<div class="Media _16x9" style="">
<img id="" class="image " alt="" style="" src="http://lorempixel.com/600/400/nature?49764" />
</div>
<div class="Card-body">
<h3 class=" " style="">
perspiciatis et quidem
</h3>
<p id="" class="">
Eius et commodi similique harum iure omnis error.
</p>
</div>
</div>
<div id="" class="Card _shadow u-space-margin-around-300" style="">
<div class="Media _16x9" style="">
<img id="" class="image " alt="" style="" src="http://lorempixel.com/600/400/business?11685" />
</div>
<div class="Card-body">
<h3 class=" " style="">
aut id perspiciatis
</h3>
<p id="" class="">
Necessitatibus numquam blanditiis ea itaque.
</p>
</div>
</div>
<div id="" class="Card _shadow u-space-margin-around-300" style="">
<div class="Media _16x9" style="">
<img id="" class="image " alt="" style="" src="http://lorempixel.com/600/400/technics?35631" />
</div>
<div class="Card-body">
<h3 class=" " style="">
sit omnis officia
</h3>
<p id="" class="">
Laudantium rerum qui cupiditate.
</p>
</div>
</div>
<div id="" class="Card _shadow u-space-margin-around-300" style="">
<div class="Media _16x9" style="">
<img id="" class="image " alt="" style="" src="http://lorempixel.com/600/400/business?50936" />
</div>
<div class="Card-body">
<h3 class=" " style="">
vitae quisquam aut
</h3>
<p id="" class="">
Harum modi facilis nesciunt distinctio cupiditate suscipit sit facere dolores.
</p>
</div>
</div>
<div id="" class="Card _shadow u-space-margin-around-300" style="">
<div class="Media _16x9" style="">
<img id="" class="image " alt="" style="" src="http://lorempixel.com/600/400/transport?3070" />
</div>
<div class="Card-body">
<h3 class=" " style="">
inventore dolores laborum
</h3>
<p id="" class="">
Aut mollitia amet autem beatae reprehenderit.
</p>
</div>
</div>
<div id="" class="Card _shadow u-space-margin-around-300" style="">
<div class="Media _16x9" style="">
<img id="" class="image " alt="" style="" src="http://lorempixel.com/600/400/technics?99077" />
</div>
<div class="Card-body">
<h3 class=" " style="">
explicabo quia pariatur
</h3>
<p id="" class="">
Dolor dicta consequatur temporibus voluptas delectus.
</p>
</div>
</div>
<div id="" class="Card _shadow u-space-margin-around-300" style="">
<div class="Media _16x9" style="">
<img id="" class="image " alt="" style="" src="http://lorempixel.com/600/400/transport?15625" />
</div>
<div class="Card-body">
<h3 class=" " style="">
eligendi possimus et
</h3>
<p id="" class="">
Molestias tempora qui nihil impedit.
</p>
</div>
</div>
<div id="" class="Card _shadow u-space-margin-around-300" style="">
<div class="Media _16x9" style="">
<img id="" class="image " alt="" style="" src="http://lorempixel.com/600/400/city?69253" />
</div>
<div class="Card-body">
<h3 class=" " style="">
quo pariatur perspiciatis
</h3>
<p id="" class="">
Est dolorum recusandae.
</p>
</div>
</div>
</div>
<button class="OverflowContainer-button OverflowContainer-button--next js-overflow-container-advance">
<span class="screenreader">
Click to advance
</span>
<span class="icon _arrow _before"></span>
</button>
</div>
{{#if shownavigation}}
<div style="position: relative">
<button class="OverflowContainer-button OverflowContainer-button--previous js-overflow-container-previous">
<span class="screenreader">
Click to go back
</span>
<span class="icon _arrow-left _before"></span>
</button>
{{/if}}
<div id="{{id}}"
class="OverflowContainer js-overflow-container {{modifier}}"
style="{{style}}"
>
{{> @children}}
</div>
{{#if shownavigation}}
<button class="OverflowContainer-button OverflowContainer-button--next js-overflow-container-advance">
<span class="screenreader">
Click to advance
</span>
<span class="icon _arrow _before"></span>
</button>
</div>
{{/if}}
{
"id": null,
"modifier": null,
"style": null,
"children": [
{
"component": "card",
"context": {
"modifier": "_shadow u-space-margin-around-300",
"media": {
"modifier": "_16x9",
"children": [
{
"component": "image",
"context": {
"src": "http://lorempixel.com/600/400/animals?34457"
}
}
]
},
"children": [
{
"component": "heading",
"context": {
"level": 3,
"text": "ut qui saepe"
}
},
{
"component": "p",
"context": {
"text": "Error impedit qui exercitationem ipsa cumque."
}
}
]
}
},
{
"component": "card",
"context": {
"modifier": "_shadow u-space-margin-around-300",
"media": {
"modifier": "_16x9",
"children": [
{
"component": "image",
"context": {
"src": "http://lorempixel.com/600/400/business?33462"
}
}
]
},
"children": [
{
"component": "heading",
"context": {
"level": 3,
"text": "veniam est quam"
}
},
{
"component": "p",
"context": {
"text": "Sunt amet magni."
}
}
]
}
},
{
"component": "card",
"context": {
"modifier": "_shadow u-space-margin-around-300",
"media": {
"modifier": "_16x9",
"children": [
{
"component": "image",
"context": {
"src": "http://lorempixel.com/600/400/people?27637"
}
}
]
},
"children": [
{
"component": "heading",
"context": {
"level": 3,
"text": "et magnam libero"
}
},
{
"component": "p",
"context": {
"text": "Aut laboriosam quia."
}
}
]
}
},
{
"component": "card",
"context": {
"modifier": "_shadow u-space-margin-around-300",
"media": {
"modifier": "_16x9",
"children": [
{
"component": "image",
"context": {
"src": "http://lorempixel.com/600/400/business?5809"
}
}
]
},
"children": [
{
"component": "heading",
"context": {
"level": 3,
"text": "quam et pariatur"
}
},
{
"component": "p",
"context": {
"text": "Doloremque perspiciatis doloremque quidem ipsam vel harum suscipit ut mollitia."
}
}
]
}
},
{
"component": "card",
"context": {
"modifier": "_shadow u-space-margin-around-300",
"media": {
"modifier": "_16x9",
"children": [
{
"component": "image",
"context": {
"src": "http://lorempixel.com/600/400/nature?49764"
}
}
]
},
"children": [
{
"component": "heading",
"context": {
"level": 3,
"text": "perspiciatis et quidem"
}
},
{
"component": "p",
"context": {
"text": "Eius et commodi similique harum iure omnis error."
}
}
]
}
},
{
"component": "card",
"context": {
"modifier": "_shadow u-space-margin-around-300",
"media": {
"modifier": "_16x9",
"children": [
{
"component": "image",
"context": {
"src": "http://lorempixel.com/600/400/business?11685"
}
}
]
},
"children": [
{
"component": "heading",
"context": {
"level": 3,
"text": "aut id perspiciatis"
}
},
{
"component": "p",
"context": {
"text": "Necessitatibus numquam blanditiis ea itaque."
}
}
]
}
},
{
"component": "card",
"context": {
"modifier": "_shadow u-space-margin-around-300",
"media": {
"modifier": "_16x9",
"children": [
{
"component": "image",
"context": {
"src": "http://lorempixel.com/600/400/technics?35631"
}
}
]
},
"children": [
{
"component": "heading",
"context": {
"level": 3,
"text": "sit omnis officia"
}
},
{
"component": "p",
"context": {
"text": "Laudantium rerum qui cupiditate."
}
}
]
}
},
{
"component": "card",
"context": {
"modifier": "_shadow u-space-margin-around-300",
"media": {
"modifier": "_16x9",
"children": [
{
"component": "image",
"context": {
"src": "http://lorempixel.com/600/400/business?50936"
}
}
]
},
"children": [
{
"component": "heading",
"context": {
"level": 3,
"text": "vitae quisquam aut"
}
},
{
"component": "p",
"context": {
"text": "Harum modi facilis nesciunt distinctio cupiditate suscipit sit facere dolores."
}
}
]
}
},
{
"component": "card",
"context": {
"modifier": "_shadow u-space-margin-around-300",
"media": {
"modifier": "_16x9",
"children": [
{
"component": "image",
"context": {
"src": "http://lorempixel.com/600/400/transport?3070"
}
}
]
},
"children": [
{
"component": "heading",
"context": {
"level": 3,
"text": "inventore dolores laborum"
}
},
{
"component": "p",
"context": {
"text": "Aut mollitia amet autem beatae reprehenderit."
}
}
]
}
},
{
"component": "card",
"context": {
"modifier": "_shadow u-space-margin-around-300",
"media": {
"modifier": "_16x9",
"children": [
{
"component": "image",
"context": {
"src": "http://lorempixel.com/600/400/technics?99077"
}
}
]
},
"children": [
{
"component": "heading",
"context": {
"level": 3,
"text": "explicabo quia pariatur"
}
},
{
"component": "p",
"context": {
"text": "Dolor dicta consequatur temporibus voluptas delectus."
}
}
]
}
},
{
"component": "card",
"context": {
"modifier": "_shadow u-space-margin-around-300",
"media": {
"modifier": "_16x9",
"children": [
{
"component": "image",
"context": {
"src": "http://lorempixel.com/600/400/transport?15625"
}
}
]
},
"children": [
{
"component": "heading",
"context": {
"level": 3,
"text": "eligendi possimus et"
}
},
{
"component": "p",
"context": {
"text": "Molestias tempora qui nihil impedit."
}
}
]
}
},
{
"component": "card",
"context": {
"modifier": "_shadow u-space-margin-around-300",
"media": {
"modifier": "_16x9",
"children": [
{
"component": "image",
"context": {
"src": "http://lorempixel.com/600/400/city?69253"
}
}
]
},
"children": [
{
"component": "heading",
"context": {
"level": 3,
"text": "quo pariatur perspiciatis"
}
},
{
"component": "p",
"context": {
"text": "Est dolorum recusandae."
}
}
]
}
}
],
"shownavigation": true
}
class OverflowContainer {
static defaultProps = {
container: document.querySelector('.js-overflow-container') // Required
};
constructor(props = {}) {
this.props = Object.assign({}, this.constructor.defaultProps, props);
const advancedButton = this.props.container.parentNode.querySelector('.js-overflow-container-advance');
if (advancedButton) {
advancedButton.addEventListener('click', this.moveCarousel);
}
const previousButton = this.props.container.parentNode.querySelector('.js-overflow-container-previous');
if (previousButton) {
previousButton.addEventListener('click', this.moveCarousel);
}
// Gets the width of the first child to determine how much it should scroll
this.scrollWidth = this.props.container.querySelector('*:first-child').clientWidth;
}
moveCarousel = event => {
this.props.container.scrollLeft += event.currentTarget.classList.contains('js-overflow-container-previous')
? -this.scrollWidth
: this.scrollWidth;
};
}
export default OverflowContainer;
.OverflowContainer {
display: flex;
width: 100%;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
overflow-y: auto;
justify-content: flex-start;
white-space: nowrap;
scroll-behavior: smooth;
* {
white-space: normal;
}
> * {
flex: 1 0 100%;
@media #{$mobile-media} {
flex-basis: 75%;
}
@media #{$desktop-media} {
flex-basis: 30%;
}
}
&-button {
@include Elevation($level: "Button", $hasShadow: false, $withZindex: true);
@include clear-default-button-styling;
position: absolute;
top: 0;
bottom: 0;
display: none;
width: 5%;
&:focus {
.icon {
display: inline-flex;
width: Space(500);
height: Space(500);
justify-content: center;
align-items: center;
background: get-color(neutral, 0);
opacity: .5;
border-radius: 50%;
&::before {
display: block;
}
}
}
&--next {
right: 0;
cursor: e-resize;
}
&--previous {
left: 0;
cursor: w-resize;
}
.icon {
display: none;
}
@media #{$desktop-media} {
display: block;
}
}
&::-webkit-scrollbar {
display: none;
}
}
The OverflowContainer is a component that allows a bunch of atoms inside of it and creates a horizontal scrolling behavior for those components. By default it should behave with the ability to scroll horizontally on mobile, then progressively enhance click control of the container.