Let’s Build Slideshow using HTML, CSS, and JavaScript
Hello guys, today in this blog we are going to create an amazing Image Slideshow with Just HTML, CSS, and JavaScript, This is going to be Responsive Slideshow which means that it can run on any screen.
Let’s watch the Slideshow first👇
Step 1: Writing the HTML code and Adding the basic Markup to our Slideshow.
Go create a file named as index.html
Lets write code
The !DOCTYPE html will ensure that this is a HTML Code HTML Tag is the root tag, inside this only the content will be written and the head tag is for connecting this html code to CSS and other Links and title is written too.
And after that body tag is also there where all the content will be written but currently its empty, don’t worry we will fill it later with code.
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Image slideshow with slide indicator</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
Next let’s add more code to the body tag or you can say element.
The main container is going to be div which will have a class of slideshow. Inside this container, there are 4 div tags and all of those have a class of img-wrapper each of them containing an img element/ tag that is going to display some different images.
Restaurant Website Using Html And Css
Below the img elements, there is another div element that has a class of dots. This div is containing 4Â div elements/tags, each of them has a class of dot. These dots are used as slide indicators to indicate which slide/img is currently being displayed on the HTML page.
The first dot element has a additional class of active, which means it is the currently active slide.
Also, JavaScript file is linked at the bottom of the body tag
<div class="slideshow">
<div class="img-wrapper"><img src="https://images.unsplash.com/photo-1615412704911-55d589229864?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1282&q=80" alt=""></div>
<div class="img-wrapper"><img src="https://images.unsplash.com/photo-1614531341773-3bff8b7cb3fc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80" alt=""></div>
<div class="img-wrapper"><img src="https://images.unsplash.com/photo-1613339027986-b94d85708995?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt=""></div>
<div class="img-wrapper"><img src="https://images.unsplash.com/photo-1610147323479-a7fb11ffd5dd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt=""></div>
<div class="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<script src="script.js"></script>This is all for the HTML lets move to CSS now.
Step 2: Writing the CSS code and Adding the Styling to our Slideshow.
Go create a filed named as style.css
First we will add styling to our div which has an class of slideshow.
The .slideshow .img-wrapper is going to set the display to none and the height to 70vh (vh means Viewport height) for the image wrapper which will hide all the images at start.
The .slideshow .img-wrapper img is going to set the height to 100% with the width to 100% and is using object fit to cover to ensure that the image fills the entire image wrapper, while preserving its aspect ratio too, it will make our img look good.
The .slideshow .dots is going set the display to flex and the justify-content to center, which will align the slide indicators in the center of the slideshow. It is also going to set the position to relative and the z-index to 1, which will place the slide indicators above the images.
Ecommerce Website Using Html,Css and JavaScript
The .slideshow .dots > .dot is going to style the individual slide indicators by setting the background to white with the height to 0.5vw, and it is using flex-grow: 1 to make the dots fill the remaining space. The margin is set to -1.4em 3vw around each dot.
The .slideshow .dots > .dot.active is going to change the background color of the active slide indicator to red.
.slideshow .img-wrapper {
display: none;
height: 70vh;
}
.slideshow .img-wrapper img {
height: 100%;
object-fit: cover;
width: 100%;
}
.slideshow .dots {
display: flex;
justify-content: center;
position: relative;
z-index: 1;
}
.slideshow .dots > .dot {
background: #fff;
height: 0.5vw;
margin: -1.4em 3vw;
flex-grow: 1;
}
.slideshow .dots > .dot.active {
background: red;
}Next lets add media queries to our website and make it responsive.
This is a media query that will only apply when the screen width is 750 pixels wide or less than it.
The first rule sets a max width of 600px to the slideshow .dots element and centers it horizontally on the page using margin: auto. This is useful for larger screens where the dots might look too spread out if they were left aligned.
The second rule increases the height of the dots to 5px. This makes the dots more visible and easier to click on for users on larger screens.
Step 3: Writing the JavaScript code and Adding the Functionality to our Slideshow.
Go create a file named as script.js
This code is going create a function called reset() which is going to reset the slideshow by hiding all image wrappers and removing the class of “active” from all the dots.
The let is declaring 3 variable at the top which are:
imgWrapper is selecting all the elements which has a class of img-wrapper, dots is selecting all the elements which has a class of ‘.dots > .dot’, i is assigned the value 0.
The function then uses a for loop to iterate over all elements located inside the imgWrapper. For each element it is setting the display property to “none” which will hide the image and removes the “active” class from the corresponding dot.
let imgWrapper = document.querySelectorAll('.img-wrapper'),
dots = document.querySelectorAll('.dots > .dot'),
i = 0
function reset() {
for(let i = 0; i < imgWrapper.length; i++) {
imgWrapper[i].style.display = 'none'
dots[i].classList.remove('active')
}
}Lets now create a new function for autoslide
The autoSlide() function is called at the end of the code and is used to display the images and update the slide indicators every 4s (4000 milliseconds).
The function uses a variable i initialized at 0 as a counter to loop through each image and slide indicator.
First it is going to check if ” i” is greater then or equal to the number of img in the imgWrapper. If it is than it set i back to 0 to start the loop again.
Then it is going to calls the reset() function which loops through each image and slide indicator and hides the images and removes the ‘active’ class from the slide indicators.
Next, the function sets the current image to be displayed by setting the style.display property of the imgWrapper element at index i to ‘block’. It also adds the ‘active’ class to the slide indicator element at index i.
After that it will increment i and sets a timeout of 4 seconds before calling autoSlide() again to start the process over.
function autoSlide() {
if(i >= imgWrapper.length) {
i = 0
}
reset()
imgWrapper[i].style.display = 'block'
dots[i].classList.add('active')
i++
setTimeout(autoSlide, 4000)
}
autoSlide()
This will make our Slideshow.
Final Output Of Slideshow Using Html , Css and JavaScript:-
Let’s watch the video again
Live Preview Of Slideshow:
FAQ:-
Will this generate Random Images or the one we will link in HTML code?
The current features will not show the random images, it will only show the images which are linked in HTML code.
How is this slideshow made?
This is an responsive slideshow which is made by just HTML, CSS and JavaScript.
Is this a good project for JS? Will It increase my JS knowledge?
For sure this is a good project this will even enhance your JavaScript Knowledge for making better projects in the future.
The slideshow will slide automatically or we will have to manually see images by scrolling?
No you don’t have to see the images by srolling manually, there is a function declared in JavaScript which will make the image slide every 4 second.
Thank you so much for Reading!