paint-brush
Using HTML And CSS To Create An Image Slider by@taimoor
691 reads
691 reads

Using HTML And CSS To Create An Image Slider

by Taimoor SattarMay 10th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

In this section, we learn how to create an image slider using HTML and CSS. You can view the full source code at the below link. The image slider is left to reveal more images. We can only see those images that are visible to us. To download dummy images, you can visit  picsum.com/images. To create a slider, we need to define the width and height of the visible area as shown above. To make the slider fancier, we can write the below code in CSS.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Using HTML And CSS To Create An Image Slider
Taimoor Sattar HackerNoon profile picture


In this article, we learn how to create an image slider using HTML and CSS. You can view the full source code at the below link.


https://codepen.io/taimoorsattar/pen/yLJBdKO


To get started, we can structure our Html code as shown below:

<div class="wrapper">
  <h2>Image Slider</h2>
  <div class="slider">
    <img
      src="https://i.picsum.photos/id/694/500/500.jpg?hmac=cEe2DO9tVxp0o0HjSI5RboKc75ofkq50NvKBIlB_0fQ"
      alt="pic"
    />

    <img
      src="https://i.picsum.photos/id/531/500/500.jpg?hmac=eaduedF4dw0jS6AeDrrxNJIxAlsmWfdZWEPdEG84WRw"
      alt="pic"
    />

    . .
    <!-- More Images Here. -->
    . .
  </div>
</div>
<!-- wrapper -->


You can add as many images as you like. To download dummy images, you can visit picsum.photos site.


In the above HTML, we have defined the class names of the HTML elements that are structured as below.


.wrapper
  └── .slider
      └── <img>
      └── <img>
      └── ....<img>...


We can insert as many images as we like. We can only see those images that are visible to us. As described in the below image, the yellow area is the visible area where images are shown. The image slider is left to reveal more images.



Next, we need to define the width and height of the visible area as shown above. To define the width of the visible area, we can define the .wrapper class as below.


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


In order to allow more images to be revealed, the visible area should scroll. For that, we can define the .slider class as below.


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


Next, to make the scroll bar of the slider fancier, we can write the below code in CSS.


::-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;
}


Also, I’ve written a blog about CSS scrollbars if you’re interested to learn, visit the below link.


Finally, our image slider preview is below.


Also publishedhere