<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">

<div class="wrapper">
  <h2>Image Slider</h2>
  <div class="slider">
  <img src="https://fastly.picsum.photos/id/388/500/500.jpg?hmac=OyRlCcXWxelkJev-ausp7NtVOVxqiOH3gi9RvG7vOi8" alt="image" />
    
    <img src="https://fastly.picsum.photos/id/266/500/500.jpg?hmac=WZD8H_1zuVhgLpkLoGSIwR8PwWYl6UuXeuILmA8pj64" alt="image" />
    <img src="https://fastly.picsum.photos/id/185/500/500.jpg?hmac=hprnqcju6_n2bs-pcR0ZoR1GnP8DjnjZH7m5YGEeM28" alt="image" />
    <img src="https://fastly.picsum.photos/id/388/500/500.jpg?hmac=OyRlCcXWxelkJev-ausp7NtVOVxqiOH3gi9RvG7vOi8" alt="image" />
    <img src="https://fastly.picsum.photos/id/419/500/500.jpg?hmac=lDjNnMBSOdkeRGs2KTGr0ZE9JABxd3WCT4eQZnIJdUs" alt="image" />
    <img src="https://fastly.picsum.photos/id/388/500/500.jpg?hmac=OyRlCcXWxelkJev-ausp7NtVOVxqiOH3gi9RvG7vOi8" alt="image" />
    <img src="https://fastly.picsum.photos/id/388/500/500.jpg?hmac=OyRlCcXWxelkJev-ausp7NtVOVxqiOH3gi9RvG7vOi8" alt="image" />
    <img src="https://fastly.picsum.photos/id/388/500/500.jpg?hmac=OyRlCcXWxelkJev-ausp7NtVOVxqiOH3gi9RvG7vOi8" alt="image" />
    <img src="https://fastly.picsum.photos/id/388/500/500.jpg?hmac=OyRlCcXWxelkJev-ausp7NtVOVxqiOH3gi9RvG7vOi8" alt="image" />

 
</div>
  
 <p>
  <span>Created by</span>
  <a href="https://taimoorsattar.dev">
    Taimoor Sattar
  </a>
</p>
  
</div>
body{
  font-family: 'Roboto', sans-serif;
}

.wrapper{
    margin: auto;
    max-width: 960px;
}

.slider{
  overflow-x:scroll;     
  white-space: nowrap;
}

.slider img{
  height: 200px
}

::-webkit-scrollbar {
  height: 5px;
  width: 10px;
  border-radius: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.