Automatic Image Slider in HTML, CSS & Jquery

Automatic Image Slider in HTML, CSS & Jquery

Automatic Image Slider in HTML, CSS & Jquery

If you want to create an automatic image slider using JQuery then this tutorial will help you a lot. I have shared many types of automatic image slider tutorials before. Most of these designs are made by HTML CSS only. Here I have shared the tutorial on making JQuery Automatic Image Slider.

First I added the images by HTML and designed them by CSS. It was then executed by JQuery. In the meantime, I have shown the design of many more Automatic Image Sliders where I have used JavaScript.

If you want to use JavaScript instead of JQuery then you can follow another tutorial made by me. This Jquery automatic image slider is very simple where I have used five images. A border and shadow have been used around the images to enhance the beauty. There is no way to change the image manually. 

Automatic Image Slider Jquery

We all know that JQuery is a kind of external JavaScript library. So to make the jQuery effective, add the jQuery CDN link to your file. In the case of the jquery automatic moving image slider that I shared earlier, there was a system to change the image manually. 

Below is a preview that will help you learn how it works. Below I have given the link to a codepen.

See the Pen
Automatic Image Slider using Jquery by Foolish Developer (@foolishdevweb)
on CodePen.

Hope you like this design. While not a groundbreaking contribution to the genre, Beginner is important to many. You can use this auto slider jquery directly in your work. The images will change automatically every 2 seconds. Although you can use another time instead of these 2 seconds. 

How to create Jquery Automatic Image Slider 

As you can see above, I first created a box on the webpage. A border and shadow have been used around it. I have used five images in this jquery Automatic Image Slider. 

You can increase the size of the image to your liking. If you want to create an automatic image slider then you must have a basic idea about HTML CSS and JavaScript.

Step 1: Basic structure of Image Slider

The basic structure has been created to create this JQuery automatic image slider using the following HTML and CSS codes. 

Here width: 600px and height: 400px are used. In addition, box-shadow has been used to enhance beauty.

<div class=”wrapper”>
  <ul id=”slider”>
  </div> 
</div>
*{
padding:0;
margin:0;
}
#slider{
margin:50px auto;
width:600px;
height:400px;
padding:5px;
box-shadow: 0 0 20px rgba(0,0,0,1);
position:relative;
}
Basic structure of Image Slider

Step 2: Add images to the slider

Now is the time to add images to this automatic slideshow jQuery. Here I have used five images. You can increase or decrease the number of images you like. 

A white space of 5 pixels is created around each image which acts as a border.

  <li class=”slide”><img src=”img1.jpg” width=”600px” height=”400px”></li>
  <li class=”slide”><img src=”img2.jpg” width=”600px” height=”400px”></li>
  <li class=”slide”><img src=”img3.jpg” width=”600px” height=”400px”></li>
  <li class=”slide”><img src=”img4.jpg” width=”600px” height=”400px”></li>
  <li class=”slide”><img src=”img5.jpg” width=”600px” height=”400px”></li>
.slide{
list-style:none;
}
#slider>li{
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
}
Add images to the slider

Step 3: Activate Automatic Image Slider with Jquery

Above we have done the design work. Now, this jquery automatic image slider needs to be implemented. If you have a basic idea about JavaScript then you can easily understand the following code.

 As you can see below I have used 2000 milliseconds to change the image. That means the image will change every 2 seconds. If you want the image to change every 3 seconds then you can use 3000 instead of 2000.

$(document).ready(function(){
  $(‘#slider>li:gt(0)’).hide();
    setInterval(function() {
      $(‘#slider > li:first’)
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo(‘#slider’);
  }, 2000);
});
Activate Automatic Image Slider with Jquery

Hopefully, you have learned from the above tutorial how this Jquery Automatic Image Slider was created. Earlier I shared many more types of image slider tutorials that were created in HTML CSS JavaScript. 

This automatic image Slider was created by JQuery. If you want the required source, you can use the download button below.