Auto Scrolling Image Slider

In this tutorial, you will learn how to create an auto scrolling image slider using pure CSS. Watch the video below for a detailed tutorial.

HTML

<body>
    <div class="wrapper">
        <div class="track">
            <div class="logo">
                <img src="logos/1.png"/>
            </div>
            <div class="logo">
                <img src="logos/2.png"/>
            </div>
            <div class="logo">
                <img src="logos/3.png"/>
            </div>
            <div class="logo">
                <img src="logos/4.png"/>
            </div>
            <div class="logo">
                <img src="logos/5.png"/>
            </div>
            <div class="logo">
                <img src="logos/1.png"/>
            </div>
            <div class="logo">
                <img src="logos/2.png"/>
            </div>
            <div class="logo">
                <img src="logos/3.png"/>
            </div>
            <div class="logo">
                <img src="logos/4.png"/>
            </div>
            <div class="logo">
                <img src="logos/5.png"/>
            </div>
        </div>
    </div>
</body>

CSS

body {
	background-color: #2E3537;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wrapper {
	background-color: #E1E2E2;
	height: 130px;
	overflow: hidden;
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0 20px;
}

.wrapper:before, .wrapper:after {
	content: "";
	position: absolute;
	height: 130px;
	width: 150px;
	z-index: 2;
}

.wrapper:after {
	right: 0;
	top: 0;
	transform: rotateZ(180deg);
}

.wrapper:before {
	left: 0;
	top: 0;
}

.wrapper .track {
	display: flex;
	width: calc(150px * 10);
	animation: scroll 15s 0.5s linear infinite;
}

.wrapper .logo {
	width: 150px;
}

.wrapper .logo img {
	height: 90px;
}

@keyframes  scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-150px * 5));
	}
}