Skip to main content

Automatic Image Slider using Only HTML & CSS


In this article, I am going to show you how to create an automatic image slider using only HTML and CSS code. We know that an image slider is a simple web element that is used to organize different images of the website in one place.

 There are different types of image sliders and the most automatic image slider is used. This type of slider is mainly used in the hero section of the homepage of various websites. In addition, different types of services or portfolio websites are used to decorate the images of many types of projects. 

Basically, this type of design has no navigation buttons which means there is no way to change the image manually. The images here will continue to change automatically from time to time. You can set this time in advance.

 First of all, I set the background of a web page to black. Then I arranged all the images nicely there. In this case, I did not use any JavaScript code. It was created using effects in the animation of css3.

 So if you are a beginner and just want to create an automatic image slider with the help of HTML and CSS, then this article will help you completely.

Video Tutorial on Automatic Image Slider

You can follow the video tutorial below to learn how to make this automatic image slider. In this video, I have shared with you how to make this image slider step by step.




Hopefully, the above video tutorial has completely helped you to make this design.
 As you can see in the video above, I have used black as the background color of the web page. Then I have arranged each image neatly in one place. I have used a black shadow around the images which have further enhanced its beauty. 

Every image here changes every seven seconds. However, you can easily increase or decrease the amount of time if you want. Now I have shared with you the source code needed to make it. Below you will find all the source codes that I used to create this design. Let me tell you something about it before copying the source code. 

Here I have used images that are 400 pixels in height and 720 pixels in width. If you want to increase the size of the images, you can change these values.

 Here I have used animation: opaqTransition 28s. So I used four pictures here and I want to change each picture every 8 seconds so I used 28 seconds in this case. If you want the images to change more quickly, you can lower the value here.

Automatic Image Slider using HTML & CSS

First of all, you create an HTML and CSS file. Copy and paste the following HTML codes into that HTML file. Copy and paste the following CSS codes into your CSS file.

 The following programming codes are HTML codes. You copy these and paste them into your HTML file (index.html).


<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Design by rajtemplate.com -->
  <title>Automatic Image Slider</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>
  <div class="card">
    <!--1st image-->
    <div class="card-part card_part-one"></div>
    <!--2nd image-->
    <div class="card-part card_part-two"></div>
    <!--3rd image-->
    <div class="card-part card_part-three"></div>
    <!--4th image-->
    <div class="card-part card_part-four"></div>

  </div>

</body>
</html>


The following codes are CSS programming codes. You copy these codes and add them to your CSS file. Be sure to try using the rename style.css of your CSS file. You can also add these codes to the head section (<head> </head>) of your HTML file using the style tag (<style> </style>).


*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  align-items: center;  
  background-color: #3c3c3c;  /* Webpage Background color */
}

.card {
  position: relative;
  width: 700px; /* slider width */
  height: 400px;  /* Slider height */
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);  /* Slider Shadow */
}


.card_part {
  position: absolute;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 7;
  display: flex;
  transform: translateX( 700px ); /* 1st iamge */
  background-image: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibwM0fUVDgfhdWSDlmXeSF3msH0S6__8toxeE1iC_RJzJ8nf_oQmT24wPoYqnkbN05PkR1KJ0D7gjQ4Z89Y-AnvePKc_rB7RjEeeq6HxPKgX4PjRa-BpkHKoNKPV9ziS8VzDcIEqE_UsQ/s16000/1+%25284%2529.jpg );
  animation: opaqTransition 28s cubic-bezier(0, 0, 0, 0.97) infinite;
}


.card_part.card_part-two { /* 2nd image */
  z-index: 6;
  background-image: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMbHMt4YWHGxelrqNa4P4TUOQ6_qbdgJ276LdbqOpHM3TNpx8HDlZ-bJUb9S_0cPEL7loBvCoUIHhr1Fza9JoFH70lhiDCJb-KbgPNW0UY-VIQzsE-QVudF7A80K5NR3t41cwLieX4e0k/s16000/1+%25286%2529.jpg );
  animation-delay: 7s;
}

.card_part.card_part-three {  /* 3rd image */
  z-index: 5;
  background-image: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5vsBgseu1qHyHQ_OvFw_OEQObXt8dyHSobOrAs96lbMEz_KHra9elVvuFaCC3zbmJyKjTaOj_B7CVhhS6KkRyiUYSVH6A78Gr6JOKkGL3-3Z7kf4IIsPwrrGdb7z3lyrAMt_2ElbnkdI/s16000/1+%25287%2529.jpg );
  animation-delay: 14s;
}

.card_part.card_part-four {  /* 4th image */
  z-index: 4;
  background-image: url( https://github.com/Flat-Pixels/assets_hosting/blob/master/picture_slides/4.jpg?raw=true );
  animation-delay: 21s;
}


@keyframes opaqTransition {
  3% { transform: translateX( 0 ); }
  25% { transform: translateX( 0 ); }
  28% { transform: translateX( -700px ); }
  100% { transform: translateX( -700px ); }
}

This design will definitely work if you use the above two types of code. If there is any problem then you can download the source code using the download button below. If there is any kind of error or problem then you can let me know by commenting. 

I have already made many more types of image sliders like this automatic image slider. You can see those designs if you want.





Tags

Comments

Post a Comment

Ask Me Anything ........

Popular Posts

Animated Progress Bar using Only HTML and CSS

Animated progress bar is mainly used in various business and personal web sites. css progress bar helps to organize your knowledge in a beautiful way. In this article, I am going to show you how to create an animated progress bar using only HTML and CSS code. I have made many other types of Progress Bar before but in that case, I have used JavaScript.  I have not used any JavaScript or external JavaScript library for this design. I created this Animated Progress Bar design using Pure HTML and CSS code. Skill bars are used on various websites to streamline the amount of experience, education, etc. with the help of animations. First of all, I have given the background-color: # 30336b of a web page. Then I made a small box here. I used four CSS Progress Bar in that box. The value of this bar will be zero when opening the page then gradually it will reach the pre-determined meaning. Video Tutorial of Pure CSS Progress Bar If you want to know how to make it better then you...
Post a Comment
Read more

Sidebar Menu Using Only HTML and CSS

This article shows you how to create sidebar menus using HTML and CSS code only. I have previously created many types of sidebars and navigation menubars using only HTML and CSS code so you can see those designs if you want.  Side Menubar A popular web element is currently used in the sidebar along with menubars on various websites. Undoubtedly the side menu bar is much more attractive and for this, the quality and beauty of the website are greatly enhanced. Under normal circumstances, I have completely hidden the menu bar on the web page.  There is a menu button that can be clicked to view the entire menu bar. There is also a cancel button which, when clicked, will completely hide the sidebar. In the sidebar, I have added links to various menu items, profile names, profile images, social media platforms.  First I gave the profile image and below that, I gave the profile name. Then I added some menu items here and added icons to each menu item. Then I created the...
Post a Comment
Read more

Responsive Navigation Menu Bar using only HTML & CSS

Responsive navigation menu bar plays an important role for every website. The navigation menu bar creates user satisfaction with the beauty of the website. The user needs a responsive navbar so that he can easily find the topic of his choice.  I have designed many more types of menubars before. But in that case, I used JavaScript code to execute the menu button. I have not used any JavaScript or external JavaScript library for this design. I have created this Responsive Navigation menu bar using pure CSS and HTML code. I only used CSS code to make it responsive. I have made it responsive using only the  @media function of CSS code. Here I have basically used a logo and used five menu items . I have used the hover effect on the menu links. The background color will change when you click on those items or move the mouse. Video Tutorial of Responsive Navigation Menu Bar You can watch the video tutorial below to know how it works and how to make it. How T...
Post a Comment
Read more

Neumorphism login form UI Design using HTML and CSS

In this article, I will show you how to create a Neumorphism login form UI design . We all know that the login form plays an important role in any website. Basically, we face the login form to access the account on different websites. Where we can log in to our account with a username and password.  Neumorphism is currently a very popular UI trend that is being used extensively to create a variety of web elements. This type of design is more beautiful than ordinary design and it is much easier to make.  This Neumorphism login form I created only with HTML and CSS code. Here is the complete color of the background color and the color of the web element. Basically, in this type of design, the background color of the web page and the element is completely the same. However, in this case, some shadows are created using CSS code which determines the size of these elements.  I put everything here like a normal login form . First of all, I added a title then there is no pla...
Post a Comment
Read more