How To Make CSS Marquee Logo Slider with Auto play

Hello viewer, Welcome to M-Softtech. In today article I will teach you how to make a marquee logo slider using only html CSS with Auto play feature. we make two sliders with opposite direction to each other. you can see on final output. this slider is Auto play slider. you can use in this slider on your website clients feedback section. it is perfect match on this slider. you can update brand images according to your requirement. and you can also change the color theme according to your website. I will share the source code with you.

HTML Source Code

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<article class="wrapper">
		<div class="marquee">
			<div class="marquee_group">
				<i class="fa fa-adn"></i>
				<i class="fa fa-amazon"></i>
				<i class="fa fa-android"></i>
				<i class="fa fa-apple"></i>
				<i class="fa fa-bitcoin"></i>
				<i class="fa fa-dropbox"></i>
				<i class="fa fa-github"></i>
				<i class="fa fa-html5"></i>
			</div>
			<div aria-hidden="ture" class="marquee_group">
				<i class="fa fa-adn"></i>
				<i class="fa fa-amazon"></i>
				<i class="fa fa-android"></i>
				<i class="fa fa-apple"></i>
				<i class="fa fa-bitcoin"></i>
				<i class="fa fa-dropbox"></i>
				<i class="fa fa-github"></i>
				<i class="fa fa-html5"></i>
			</div>
		</div>


		<div class="marquee marquee-reverse">
			<div class="marquee_group">
				<i class="fa fa-adn"></i>
				<i class="fa fa-amazon"></i>
				<i class="fa fa-android"></i>
				<i class="fa fa-apple"></i>
				<i class="fa fa-bitcoin"></i>
				<i class="fa fa-dropbox"></i>
				<i class="fa fa-github"></i>
				<i class="fa fa-html5"></i>
			</div>
			<div aria-hidden="ture" class="marquee_group">
				<i class="fa fa-adn"></i>
				<i class="fa fa-amazon"></i>
				<i class="fa fa-android"></i>
				<i class="fa fa-apple"></i>
				<i class="fa fa-bitcoin"></i>
				<i class="fa fa-dropbox"></i>
				<i class="fa fa-github"></i>
				<i class="fa fa-html5"></i>
			</div>
		</div>
	</article>




</body>
</html>

CSS Source Code

:root{
  --color-text:#000;
  --colog-bg:#000;
  --color-bg-accent:#FFE018;
  --size:clamp(10rem, 1rem + 40vmin, 30rem);
  --gap:calc(var(--size) / 14);
  --duration:60s;
  --scroll-start:0;
  --scroll-end:calc(-100% - var(--gap));
}

*{box-sizing: border-box;}
body{
  display: grid;
  align-content: center;
  overflow: hidden;
  gap:var(--gap);
  width: 100%;
  min-height: 100vh;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--colog-bg);
}
.marquee{
  display: flex;
  overflow: hidden;
  user-select: none;
  gap:var(--gap);
}
.marquee_group{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap:var(--gap);
  min-width: 100%;
  animation: scroll-x var(--duration) linear infinite;
}
.marquee-reverse .marquee_group{
  animation-direction: reverse;
  animation-delay: -3s;
}
@keyframes scroll-x{
  from{transform: translateX(var(--scroll-start));}
  to{transform: translateX(var(--scroll-end));}
}
.fa{font-size: 70px!important}
.marquee .fa{
  display: grid;
  place-items:center;
  width: var(--size);
  fill: var(--color-text);
  background: var(--color-bg-accent);
  aspect-ratio:19/9;
  padding: calc(var(--size) / 10);
  border-radius: 0.5rem;
}
.wrapper{
  display: flex;
  flex-direction: column;
  gap:var(--gap);
  margin: auto;
  max-width: 100vw;
}

If you enjoyed reading this post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts.

if you have any confusion Comment below or you can contact us by filling out our contact us.

YOU MIGHT ALSO LIKE

How To Make a Responsive Flexbox Website Layout

How to Create Responsive Resume Website using HTML and CSS | Resume CV design in HTML CSS

If you have any problem to understand this code you can watch also video tutorial