Learn how to create slider animation using javascript

In this tutorial, you will learn how to create slider animation using Java Script.

Click this link to see a demo of the slider – https://entheosweb.com/video_tutorials/Slider/

Step: 1 – Images of the required size

Make your images to the size of your requirement.

I have created 4 images with 920 pixels width and 440 pixels height and I have named them slider1.jpg, slider2.jpg, slider3.jpg and slider.jpg

See the sample images in the demo here: https://entheosweb.com/video_tutorials/Slider/

Using FTP upload them to the images folder.

Step: 2 – CSS and JS files

Now make your CSS and JS files, using the URL here : https://entheosweb.com/video_tutorials/Slider/banner.js

Copy and paste the java script codes to your html editor and save it as banner.js

Similarly using the URL here: https://entheosweb.com/video_tutorials/Slider/banner.css

Copy and paste the codes to your html editor and save it as banner.css

Upload both the banner.js and banner.css to your root directory.

Step: 3 – Javascript code in the HTML page where the slider will be displayed

Using your index.html file, select the place where you want the slider animation to take place, in this instance I want this animation to happen just below my menu navigation bar, now copy and paste the below codes there:

<script language=”javascript”>
banner1 = new Banner(‘banner1’);

banner1.add(“IMAGE”, “images/slider1.jpg”, 2, 440, 920,”index.html”);
banner1.add(“IMAGE”, “images/slider2.jpg”, 2, 440, 920,”index.html”);
banner1.add(“IMAGE”, “images/slider3.jpg”, 2, 440, 920,”index.html”);
banner1.add(“IMAGE”, “images/slider4.jpg”, 2, 440, 920,”index.html”);

document.write(banner1);

banner1.start();

</script>

As you can see above, the slider1.jpg, slider2.jpg, slider3.jpg and slider4.jpg are all parked into my images folder and they are of 440 pixels height and 920 pixels width, they will animate with a duration of 2 seconds between each slider, you can also redirect each of these sliders to a html page, in this demo, since I have created just a single page template, I am redirecting all the four sliders to index.html.

Step: 4 – Stylesheet and JavaScript code in the header of the HTML page

Last but not least, go to the header tab on top of the index.html page and paste these codes:

<link href=”banner.css” type=”text/css” rel=”StyleSheet”>
<script language=”JavaScript” src=”banner.js”></script>

Here I am calling for my banner.css and banner.js files.

Save the index.html file and upload them using FTP to your root directory.

Delete your cache and refresh your browser to see the animation.

You can see the demo here: https://entheosweb.com/video_tutorials/Slider/

Congratulations! You now know how to create a slider animation using JavaScript. We hope you found this tutorial helpful!

Here is the video tutorial again for your reference:

  
  
  
Learn how to create slider animation using javascript

Related Tutorials

Animation Tutorials and Resources


Pinterest