In this article, I will show you how to create a slider that slides automatically and also with the next and previous buttons using HTML CSS and JavaScript code.
In a slideshow in javascript there is a time period during which the content is replaced either it is an image or video.The user can move the buttons to the next one by clicking on them
This type of slider is used in websites to store many types of images together to show as a gallery. This slider works automatically and can be controlled manually.
Now, we start our automatic image slider in html css javascript.You can also call this js gallery slider.
javascript image slider is simple to code but you must understand the logic behind it. So, you can easily design any type of automatic slideshow html css js.
Step 1: Create the HTML code
- Create .html file
- Create .js file
- create .css file
- create a folder for your images
And place all these files within a folder.
I am using Visual Studio Code, you can use any Code Editor.
Link your .css file and .js file with your html file.
Now, we add our images. Take a div and give it a class name ” main”. Then take the inner div separately for each image and assign them a class ” slide”. It will help us in coding and styling later.
We need two buttons to control this slider manually. So, create two buttons within the same parent div using <Span>. Give them a class “arrow ” for styling them and assign them id as “prev” and ” next”. I have added predefined HTML Arrows, you can get them from toptal.com. I have assigned them onclick fnctions which we will discuss further in our Javascript.
Step 2: Css styling
First we style our main div. Give it a maximum width of 70%, height 500px , margin from top and bottom 100px and auto from right and left to make it center. Give Box-sahdow grey and give this main div position ” relative”.
Now, we style our Next and Previous arrows. Assign them position “absolute” and top 45% to maove this arrow up the slider. And move the right arrow to the right side of the slider.
Step 3: Javascript Code for image slider
First of all we need to understand our umber of images and their index number.
create a variable ” slideno” and assign it value “0”. And create function slideshow( ), and pass ” slideno” value to this function.
As you can see by default all the images are showing on your screen. We need to hide them by default and make slide[0] visible by default.
Use “num” to receive “slideno” value in the function. As we have given all the slides a class “slide ” in our html code. Make display None for all the slides and then make slide[0] display block by default in the start.
create function for Previous and next button.
Now we have to take slide back to ‘0’ when it reaches to the End of the slides and take slides backward with the previous button. Add this code to your slideshow( ) function.
Now the slider is working fine manually with the next and previous buttons. Now we have to make it slide automatically.
image slider in javascript source code
Just copy and paste this code.
<body>
<div class=”main”>
<div class=”slide”>
<img src=”Images/image1.jpg” alt=””>
</div>
<div class=”slide”>
<img src=”Images/image2.jpg” alt=””>
</div>
<div class=”slide”>
<img src=”Images/image3.jpg” alt=””>
</div>
<div class=”slide”>
<img src=”Images/image4.jpg” alt=””>
</div>
<div class=”slide”>
<img src=”Images/image5.jpg” alt=””>
</div>
<div class=”slide”>
<img src=”Images/image6.jpg” alt=””>
</div>
<span class=”arrow” id=”prev” onclick=”controller(-1)”>❮</span>
<span class=”arrow” id=”next” onclick=”controller(+1)”>❯</span>
</div>
</body>
<————————–CSS code—————————->
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.main{
max-width: 70%;
height: 500px;
margin: 100px auto;
box-shadow: 0px 0px 30px grey;
position: relative;
}
.arrow{
cursor: pointer;
position: absolute;
top: 45%;
color: red;
background-color: white;
padding: 8px 18px;
font-size: 25px;
font-weight: bold;
}
#next{
right: -55px;
}
<——————————————–js Code——————————————->
/*Images 6 ( index: 0 1 2 3 4 5 )
Length =6 */
let slideno = 0;
/* Previous and Next Buttons*/
function controller(x) {
slideno = slideno + x;
slideshow(slideno);
}
slideshow(slideno);
/* Auto Slide */
setInterval(auto, 2000);
var counter = 0;
function auto() {
var autoslides = document.getElementsByClassName(“slide”);
for (var all of autoslides) {
all.style.display = “none”;
}
autoslides[counter].style.display = “block”;
counter++;
if (counter == autoslides.length) {
counter = 0;
}
}
/* Slideshow function*/
function slideshow(num) {
var slides = document.getElementsByClassName(“slide”);
/*moves slide back to ‘0’ when it reaches to the End of the slides*/
if (num == slides.length) {
slideno = 0;
num = 0;
}
/*moves slides backwads with the previous button*/
if (num < 0) {
slideno = slides.length – 1;
num = slides.length – 1;
}
/* Bydefault made all slides display none*/
for (var all of slides) {
all.style.display = “none”;
}
/* To display image at [0] bydeafulat*/
/*Will display slide with the value in “num” variable*/
slides[num].style.display = “block”;
}
