CSS only image Slider

Project Description:

In this project we are going to make a Image slider using HTML and CSS only. without using javascript.

First, we will place all the images inside a Container using figure tag.
Then we will make images slide using css animation properties, using @keyframe.

Requirements:

You must be familiar with html figure tag.
You must know how to use css animation property using @keyframe.

Challenge:

If you want to create css image slider with the help of description and guidelines above, you can try our Editor above.

Slider must look like below in image:

Guides:

Create a css slider container using div tag or section tag.
Place all the images inside figure tag, inside the container.
Define width of the figure tag width:600% in css. You can change width according to number of images.
Create a animation frame for all images so they will be able to slide.

If you want to take a challenge don't scroll below

Source code for css image slider

HTML


        <div class="slider">
            <figure>
           <img src="images/image1.jpg" alt="first image"/>
           <img src="images/image2.jpg" alt="second image"/>
           <img src="images/image3.jpg" alt="third image"/>
           <img src="images/image4.jpg" alt="fourth image"/>
           <img src="images/image5.jpg" alt="fifth image"/>
           <img src="images/image6.jpg" alt="sixth image"/>
           </figure>
           </div>

CSS

    
  .slider
  {
      max-width:800px;
      height:500px;
      position: relative;
      overflow: hidden;
  
  }
  
      
  .slider figure
  {
  width:600%;
  height: 500px;
  animation:15s sliding infinite;
  position: relative;
  }
  .slider figure img
  {
  
      object-fit:cover;
      width:16%;
      height:100%;
      float:left;
    
  }
  @keyframes sliding
  {
  0%{left:0;}
  16%{left:-100%;}
  32%{left:-200%;}
  48%{left:-300%;}
  64%{left:-400%;}
  80%{left:-500%;}
  100%{left:-500%;}
   
  
  }

    //note:javascript will not change automatically you will need to update html or css after editing js.

PREVIEW:

Challenge-2:

Bring a transition effects on every image.