<main class="container">
	<div class="child">
		<h2>Image 1</h2>
	</div>
	<div class="child">
		<h2>Image 2</h2>
	</div>
	<div class="child">
		<h2>Image 3</h2>
	</div>
	<div class="child">
		<h2>Image 4</h2>
	</div>
	<div class="child">
		<h2>Image 5</h2>
	</div>
	<div class="child">
		<h2>Image 6</h2>
	</div>
	<div class="child">
		<h2>Image 7</h2>
	</div>
</main>
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Helvetica', sans-serif;
}

.container {
	width: 60vw;
	height: 70vh;
	margin: 15vh auto;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
  color: white;
  background-color: oldlace;
  display: flex;
  align-items: center;
}

.child {
  margin-left: 0.5rem;
	height: 90%;
	scroll-snap-align: start;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.child:nth-child(1n) {
	background-color: darkorchid;
	flex: 0 0 80%;
}

.child:nth-child(2n) {
	background-color: indigo;
	flex: 0 0 60%;
}

.child:nth-child(3n) {
	background-color: navy;
	flex: 0 0 40%;
}

.child:nth-child(4n) {
	background-color: palegreen;
	flex: 0 0 50%;
}

.child:nth-child(5n) {
	background-color: yellow;
	flex: 0 0 80%;
}

.child:nth-child(6n) {
	background-color: orange;
  flex: 0 0 60%;
}

.child:nth-child(7n) {
	background-color: tomato;
  flex: 0 0 80%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.