Hey, developers welcome to Day 43 of our 90Days 90Projects challenge. And in Day 43 we are going to create a Horizontal Scrolling div with Images HTML CSS.
So to run the code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
![Horizontal Scrolling div with Images HTML CSS, horizontal scrolling div with arrows css, custom horizontal scrollbar css, how to add or hide horizontal scrollbar but still scroll Horizontal Scrolling div with Images HTML CSS, horizontal scrolling div with arrows css, custom horizontal scrollbar css, how to add or hide horizontal scrollbar but still scroll](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAesi_zeQMc7QqF8Sumx--Eq1QlE3dF0Uz_dds8MBlyMzGJjUjENAtUE-q9BdYuzdLAS9mMg6acbTSMLdqnovvRKvQO8k25Sco_EMpeRomotRnVBzGdAPJdj4a0YvXhZuduCU0Um8UitX6P-9TArfiopYWndX8p4R5iw3zTea5EAIa0ZQzf30K3map/s16000/Scroll%20Bar%20using%20HTML%20CSS.png)
Image Resource - Download Now
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS Slider </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="scroll-container">
<div class="scroller-item">
<img src="./client.png" alt="">
</div>
<div class="scroller-item">
<img src="./client.png" alt="">
</div>
<div class="scroller-item">
<img src="./client.png" alt="">
</div>
<div class="scroller-item">
<img src="./client.png" alt="">
</div>
<div class="scroller-item">
<img src="./client.png" alt="">
</div>
<div class="scroller-item">
<img src="./client.png" alt="">
</div>
<div class="scroller-item">
<img src="./client.png" alt="">
</div>
</div>
</div>
</body>
</html>
CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.scroll-container {
width: 500px;
padding: 10px;
display: grid;
flex-flow: row;
overflow-x: auto;
border-radius: 50rem;
grid-auto-flow: column;
border: 1px solid rgb(170, 170, 170);
}
.scroll-container::-webkit-scrollbar {
display: none;
}
.scroller-item {
width: 100px;
height: 100px;
margin: 0.5rem;
cursor: pointer;
border-radius: 50%;
position: relative;
border: 2px solid #e60be6;
}
.scroller-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
transition: all 0.2s linear;
}
.scroller-item img:hover {
transform: scale(1.1);
}