Image Slider in HTML CSS Without JavaScript

This tutorial will guide you through creating a simple image slider using only HTML and CSS. No JavaScript is required! We’ll build a visually appealing slider perfect for showcasing images on your website. This technique is ideal for beginners learning web development and requires no prior knowledge of JavaScript.

Step 1: Setting up the HTML Structure

Creating the Slider Container

First, we need to create the basic HTML structure for our image slider. This involves creating a container for the slider itself and individual containers for each slide.

<section>
  <div class="controls">
    <ul>
      <li><a href="#slide1"></a></li>
      <li><a href="#slide2"></a></li>
      <li><a href="#slide3" ></a></li>
      <li><a href="#slide4" ></a></li>
    </ul>
  </div>
  <div class="slider">
    <div class="slide" id="slide1">
      <img src="https://images.unsplash.com/photo-1560281340-6d9e200156f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="">
    </div>
    <div class="slide" id="slide2">
      <img src="https://images.unsplash.com/photo-1560306843-33986aebaf12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80" alt="">
    </div>
    <div class="slide" id="slide3">
      <img src="https://images.unsplash.com/photo-1560276520-3eb2bacbcad5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="">
    </div>
    <div class="slide" id="slide4">
      <img src="https://images.unsplash.com/photo-1560253671-6c13b2968f3a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80" alt="">
    </div>

  </div>
</section>

<div class="content">
  <h1>Pure Css Slider</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo nulla deleniti doloremque ex numquam aspernatur tempore labore, eius aliquam aperiam, dolores quis, a maxime veritatis officiis recusandae architecto. Ipsum, necessitatibus. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias fugit dolore, ullam atque tempore libero dolorem eum officia sed numquam repellendus non consectetur! Est ducimus ullam saepe debitis nulla itaque! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad, corporis. Facilis quod voluptates dignissimos minus! Asperiores obcaecati fuga repellendus sint ipsum commodi at. Modi quasi cum nihil molestiae ut voluptatem?
  Odio repellat eum porro esse nesciunt fugit, ad eaque asperiores, voluptatibus illo consectetur aut. Enim repellat ipsam, aliquid amet, non laborum ut perspiciatis dolor laudantium, accusantium deleniti aliquam. Doloribus, porro?
  Accusamus distinctio iste placeat saepe odit voluptatum eligendi tenetur, molestiae excepturi, ducimus dolores. Ab possimus aliquid veniam magnam neque eaque repudiandae culpa, nobis sunt illum accusamus fuga voluptate voluptatum rem!</p>
</div>

Step 2: Styling with CSS

Now, let’s style our slider using CSS. We’ll use CSS to position the elements, control the size and appearance of the images, and add visual appeal.

body {
  margin: 0;
  padding: 0;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slider .slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.slider .slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.controls {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.controls ul {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
}
.controls li {
  list-style: none;
}
.controls li a {
  display: block;
  width: 1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
  margin: 10px 0;
  opacity: 0.8;
}
.controls li a:hover {
  opacity: 1;
}

.content {
  padding: 50px;
  box-sizing: border-box;
  font-family: Consolas;
}
.content h1 {
  font-size: 3em;
  text-align: center;
}
.content p {
  font-size: 1.4em;
}

Congratulations! You’ve successfully created an image slider using only HTML and CSS. This method provides a clean, simple, and lightweight solution for displaying images on your website without needing any JavaScript.