Creating An Image Slider Using JavaScript, HTML, And CSS Only

In this article, we are going to learn how to create a simple images slider using HTML, CSS, and JavaScript only. Here, we are not using any external frameworks/plugins for slider.

In real time scenarios, there may be a requirement to put an image slider in the application web page. Within seconds, a developer thinks to use an existing jQuery plugin or something else. While using such kind of plugins, sometimes there is a chance of code conflicts between the plugin libraries and the existing libraries used in the application, and this takes time to get fixed.

If the slider requirement is simple and short, building your own slider using HTML and JavaScript can be one of the best ways to achieve it. This will take less time to implement and give no conflicts/errors.

Let’s start making it.

Step 1

Create a folder named “images” in the project path and put all the images required for the slider. Make sure that all the images are in same size (width*height). Otherwise, the slider will misbehave while navigating between slides.

Step 2

Add the below code in body section of the HTML page.

Here, <div class=”slidercontainer”> is the main container for slider and <div class=”showSlide fade”> are the slider images section that are repeating.

Step 3

Write the JavaScript code. Considering  it a small example, I am writing the code in the same HTML page using <script type=”text/javascript”></script>.

If required, you can create an external JS file in the project path and refer it to the HTML page.

All the above functions are user defined. We just only write some logic to read the slides and showing.

Step 4

Now, it’s time to apply CSS to showcase the images in a proper position with some styles. Below is the final code —

If you notice in the above code, I haven’t included any libraries, not even jQuery.

Step 5

Now, let’s run the HTML page in browser and see the output. The slider should work properly.

Thanks for reading this article. Hope it helps.
Share on:

Free Exclusive Traffic Tips

Enter your email below to get access to my
proven SEO and traffic tips.

Hello, I am Dharmendra Yadav and I am a Blogger, Web Developer, Web Designer, Search Engine Optimizer, Digital Marketing Instructor. You can find me on Facebook , Linkedin

Leave a Comment