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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<body> <div class="slidercontainer"> <div class="showSlide fade"> <img src="images/img1.jpg" /> <div class="content">Lorem ipsum dolor sit amet</div> </div> <div class="showSlide fade"> <img src="images/img2.jpg"/> <div class="content">Lorem ipsum dolor sit amet</div> </div> <div class="showSlide fade"> <img src="images/img3.jpg"/> <div class="content">Lorem ipsum dolor sit amet</div> </div> <div class="showSlide fade"> <img src="images/img4.jpg"/> <div class="content">Lorem ipsum dolor sit amet</div> </div> <!-- Navigation arrows --> <a class="left" onclick="nextSlide(-1)">â®</a> <a class="right" onclick="nextSlide(1)">â¯</a> </div> </body> |
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>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script type="text/javascript"> var slide_index = 1; displaySlides(slide_index); function nextSlide(n) { displaySlides(slide_index += n); } function currentSlide(n) { displaySlides(slide_index = n); } function displaySlides(n) { var i; var slides = document.getElementsByClassName("showSlide"); if (n > slides.length) { slide_index = 1 } if (n < 1) { slide_index = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slide_index - 1].style.display = "block"; } </script> |
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 —
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Slider</title> <style type="text/css"> body { margin: 0; background: #e6e6e6; } .showSlide { display: none } .showSlide img { width: 100%; } .slidercontainer { max-width: 1280px; position: relative; margin: auto; } .left, .right { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } .right { right: 0; border-radius: 3px 0 0 3px; } .left:hover, .right:hover { background-color: rgba(115, 115, 115, 0.8); } .content { color: #eff5d4; font-size: 30px; padding: 8px 12px; position: absolute; top: 10px; width: 100%; text-align: center; } .active { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } </style> </head> <body> <div class="slidercontainer"> <div class="showSlide fade"> <img src="images/img1.jpg" /> <div class="content">Slide1 heading</div> </div> <div class="showSlide fade"> <img src="images/img2.jpg" /> <div class="content">Slide2 heading</div> </div> <div class="showSlide fade"> <img src="images/img3.jpg" /> <div class="content">Slide3 heading</div> </div> <div class="showSlide fade"> <img src="images/img4.jpg" /> <div class="content">Slide4 heading</div> </div> <!-- Navigation arrows --> <a class="left" onclick="nextSlide(-1)">â®</a> <a class="right" onclick="nextSlide(1)">â¯</a> </div> <script type="text/javascript"> var slide_index = 1; displaySlides(slide_index); function nextSlide(n) { displaySlides(slide_index += n); } function currentSlide(n) { displaySlides(slide_index = n); } function displaySlides(n) { var i; var slides = document.getElementsByClassName("showSlide"); if (n > slides.length) { slide_index = 1 } if (n < 1) { slide_index = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slide_index - 1].style.display = "block"; } </script> </body> </html> |
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.
