Automatic Multiple Image Slider

Automatic Multiple Image Slider in HTML CSS

Automatic Multiple Image Slider in HTML CSS

In this article, you will learn how to create an Automatic Multiple Image Slider. You’ve probably heard of the automatic image slider, but the automatic multiple image slider is quite interesting. In the case of this type of multiple image slider, two or more image sliders work simultaneously. 

Here I have created an automatic multiple image slider using HTML and CSS. Here the two image sliders worked together and changed the image automatically. No JavaScript is used here, only some simple HTML and CSS are used. In the case of this multiple image slider, there is no way to change the image manually. Here the images change automatically from time to time. 

I have shared many more tutorials on automatic and manual sliders with you before. Here I have used very few images. You can increase the size of the image as per your requirement. To create it, first, you need to create an HTML and CSS file. 

Automatic Multiple Image Slider using HTML CSS

Below I have given all the source codes. I have not shared any separate step-by-step tutorial for this. Because a very small amount of code is used here which you can easily understand. Live Demo 👇👇

See the Pen
Untitled
by Foolish Developer (@foolishdevweb)
on CodePen.

Hopefully, the above demo has helped you to know how it works (Automatic Multiple Image Slider in HTML CSS). In the demo section above you will find the required source code which you can copy and use. First, create an HTML and CSS file.

Step 1: HTML code of Image Slider

The following HTML codes are basically the basic structure of the image slider and add images as needed. Copy these HTML codes and add them to your HTML file.

<header>
  <div class=”row large”>
     <div class=”imagegroup” style=”border:2px solid white”>
       <img src=”https://picsum.photos/seed/1/1024/480″ alt=””>
       <img src=”https://picsum.photos/seed/2/1024/480″ alt=””>
     </div>
  </div>
  <div class=”row small”>
    <div class=”imagegroup” style=”animation-delay: 1s;”>
       <img src=”https://picsum.photos/seed/3/342/180″ alt=””>
       <img src=”https://picsum.photos/seed/4/342/180″ alt=””>
       <img src=”https://picsum.photos/seed/5/342/180″ alt=””>
       <img src=”https://picsum.photos/seed/6/342/180″ alt=””>
       <img src=”https://picsum.photos/seed/7/342/180″ alt=””>
       <img src=”https://picsum.photos/seed/8/342/180″ alt=””>
    </div>
  </div>
</header>

Step 2: CSS code of Multiple Slider

The following code is the CSS code that designed and implemented this automatic multiple image slider. I hope the following codes will not be difficult for you to understand. You copy these codes and paste them into your CSS file. 

Be sure to attach your CSS file to the HTML file. If you do not want to create a separate CSS file, you can post the code using the style tag in the HTML file.

header {
   max-width: 1024px;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   overflow: hidden;
  }
.row {
   display: flex;
   overflow: hidden;
  }
.imagegroup {
   display: flex;
   width: 100%;
  }
.imagegroup img{
  flex-shrink: 0;
  object-fit: cover;
  border: 3px solid white;
}
.imagegroup {
   animation: travel 20s ease-in-out infinite;
  }
@keyframes travel {
   0%, 100% {
      transform: translate3d(0,0,0);
    }
   50% {
      transform: translate3d(-100%,0,0);
    }
 }

Hopefully, you have created this automatic multiple image slider using the above HTML and CSS codes. In the case of this automatic image slider, there is no way to change the image manually. However, I have already shared many tutorials on how to do it manually if you want.

You can find the source code for creating an Automatic Multiple Image Slider in HTML CSS in the download button below. If there is any problem then you can definitely let me know by commenting.