How to create Image Slider Using Java-Script

Simple Image Slider Using Java-Script

Image sliders are used nowadays in wide varieties. They are mostly used on the home page where the company shows some of their best pictures, logos and sometimes package’s etc. Image sliders enhance the beauty of side and as they slide again and again then use will not feel bored while browsing the web site. Today we create a very simple image slider which only changes pictures again and again without any effect. To do this, first, we create the main div element and give it a class name like ‘main’ because it’s the main drive.

Now inside this main div, we create multiple divs equal to the number of pictures we want to show as in my case I want to show five pictures on my slider which slides again and again.

In the nested div above, I gave them all the same class name so that the effect was applied on all of them. Now, as we want to show an image so use img tag and give them a source of the picture and write that code on every inner div tag.

Now the full code of html is like:

Now HTML code is complete, switch to style section and gives them some style. So first I target my inner diva class=slid using its class selector slid. And set its width and height 80 and 50%. It sets margin is equal auto so it come to the center of the page and set some shadow of its beauty. Now a very important part which is CSS display property I set it to none and by setting it none nothing will be shown. I did it because I want to show them one by one so by using Java-Script I handle that thing and this time I put it none.

To set full image on div target img tag and set its height and width 100%.

The complete style code is:

Now turn on Java-Script code and first understand the logic. First I get all the divs containing img by their class name that is ‘slid’.

After getting save it on a variable like x.

Now aar1 is an array containing all the classes with same name as its indexes. Its like first div is at arr1[0] and so on.

Now we have the entire image in our JavaScript array named arr1. And we want to show them one by one as in our CSS code we set all the div display=none, we put one by one display=block and then hide it and next to the display and so on.

I build a simple logic on it. I use a variable a=0 and increment it and on every increment show one image in a div at a time.

 

As we need to do this task again and again, we run and infinite recursive loop and use setTimeout() function which is the use of Java as a delay function and pass it two parameters one is function name and the other is the delay time. This function calls the function in the first parameter after the time set in the second parameter.

setTimeout(sliderbar,2300);

Like in above sliderbar is a function name which we call again and again after some seconds on time. The complete JS code is:

 

 

The Compete Code of slider is:

 

These images are gathered from different websites

Simple Image Slider Using Java-Script