How to make horizontal scroll item Using HTML CSS Only

December 29, 2022December 29, 2022 M-SoftTech 0 Comments

hello, viewer in today article I will teach you how to make a horizontal slider using of html only.

Basically a slider, as in, a bunch of boxes set in a row that you can navigate between. you know well what a slider is. There are loads of features you may want in a slider. you also seen many slider in internet. just as one example, you might want the slider to be swiped or scrolled. but this slider is auto slider. when you put the cursor in slider then slider are freeze.

this slider make only using of html CSS only. I have not unsinging any any JavaScript and jQuery library. this slider is totally based on html CSS only.
it is very simple and attractive slider. also, I have share that slider source code with you. you can see on below

HTML Code

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>

<div class="wrapper">
	<div class="outer">
		<div class="card" style="--dealy:-1;">
			<div class="content">
				<div class="img"><img src="image/img-1.jpg"></div>
				<div class="details">
					<span class="name">Manoj Adhikari</span>
					<p>Frontend Developer</p>
				</div>
			</div>
			<a href="#">Like</a>
		</div>

		<div class="card" style="--dealy:0;">
			<div class="content">
				<div class="img"><img src="image/img-2.jpg"></div>
				<div class="details">
					<span class="name">Shivam Adhikari</span>
					<p>YouTuber & Blogger</p>
				</div>
			</div>
			<a href="#">Like</a>
		</div>

		<div class="card" style="--dealy:1;">
			<div class="content">
				<div class="img"><img src="image/img-3.jpg"></div>
				<div class="details">
					<span class="name">Aradhaya Bisht</span>
					<p>Freelancer & Vlogger</p>
				</div>
			</div>
			<a href="#">Like</a>
		</div>

		<div class="card" style="--dealy:2;">
			<div class="content">
				<div class="img"><img src="image/img-4.jpg"></div>
				<div class="details">
					<span class="name">Anav Bisht</span>
					<p>Backend Developer</p>
				</div>
			</div>
			<a href="#">Like</a>
		</div>

		<div class="card" style="--dealy:2;">
			<div class="content">
				<div class="img"><img src="image/img-5.jpg"></div>
				<div class="details">
					<span class="name">Jasmine Bisht</span>
					<p>Teacher & Advertiser</p>
				</div>
			</div>
			<a href="#">Like</a>
		</div>
	</div>
</div>




</body>
</html>

CSS Code

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a2668;
}
.wrapper .outer{
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .card{
  background: #ffeba7;
  width: 430px;
  display: flex;
  align-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 5px 20px 24px 5px #00000073;
  animation: animate 15s linear infinite;
  border: 1px solid #5bd370;
  animation-delay: calc(3s * var(--dealy));
}
.outer:hover .card{
  animation-play-state: paused;
}
.wrapper .card:last-child{
  animation-delay: calc(-3s * var(--dealy));
}
@keyframes animate{
  0%{
    opacity: 0;
    transform: translateX(100%) scale(0.5);
  }
  5%, 20%{
    opacity: 0.2;
    transform: translateX(100%) scale(0.7);
  }
  25%, 40%{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0%) scale(1);
  }
  45%, 60%{
    opacity: 0.2;
    transform: translateX(-100%) scale(0.7);
  }
  65%, 100%{
    opacity: 0;
    transform: translateX(-100%) scale(0.5);
  }
}

.card .content{display: flex; align-items: center;}
.wrapper .card .img{
  height: 80px;
  width: 80px;
  position: absolute;
  left: -35px;
  background: white;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
.card .img img{
  height: 100%;
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}
.card .details {margin-left: 40px;}
.deatils span{
  color: #1a2668;
  font-weight: 600;
  font-size: 18px;
}
.details p{color: #1a2668;}
.card a{
  text-decoration: none;
  padding: 7px 18px;
  border-radius: 25px;
  color: white;
  background: #1a2668;
  transition: all 0.3s ease;
}
.card a:hover{transform: scale(0.94);}

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 Make Website Using HTML & CSS | Full Responsive Website Design Step by Step

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