<div class="slideshow">
<img src="images/beach.jpg" alt="beach">
<img src="images/bird.jpg" alt="bird">
<img src="images/crater-lake.jpg" alt="lake">
<img src="images/hollywood.jpg" alt="hollywood">
<img src="images/london.jpg" alt="london">
<img src="images/snail.jpg" alt="snail">
</div>NowforourCSS:* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
}
.slideshow {
overflow: auto;
overflow-y: hidden;
height: 100vh;
width: 100vw;
white-space: nowrap;/* Internet Explorer 10 and 11 support */
-ms-scroll-snap-type: mandatory;
-ms-scroll-snap-points-x: snapInterval(0%, 100%);/* Webkit browsers */
-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-points-x: repeat(100%);/* Standardized syntax */
scroll-snap-type: mandatory;
snap-points-x: repeat(100%);
}img {
width: 100%;358 CSS Master