How To Make Image Slider Using HTML CSS JavaScript

hi guys welcome back to another video of easy tutorials youtube channel today in this video we are going to learn how to make an image slider on the website and on this image slider you can see multiple control option first of all this image is sliding automatically it means we have the auto slide feature and after that you can see the next and previous icon if we click on this icon it will go to the next image and if we click on this icon it will display the previous image and these images are in the loop it means when we are on the last image and click on the next it will again start with the first one after that you can see at the bottom we have these indicators and if i click on any of this dot it will change the slide now there is one more cool feature of this image slider that is swipe you can see i can swipe this image like this in any direction if anyone is accessing this slider on mobile device they can simply swipe like this this image slider has lots of features and we are going to build it using html css and javascript in just 10 minutes so let's start this video here in this folder i have one html file and one css file and i have another folder called images and in this one you can see for images that i will be using on the webpage you can find all these images download link in the video description now i will open these files with my code editor which is visual studio code so this is the html file where i have added the basic html structures and this one is the css file where i have added margin padding 0 and box sizing border box in the html file i have added this link tag to connect html and css file next we will create a div in the body so here let's create a div with the class name container next we will add the css for this container so write this class name in the css file and here we will add the width and height width will be 100 height 100 vh and let's add the background triple two after adding this we will open the webpage so let's open this html file with any web browser now you can see this entire screen is black because we have added the black color in the background next we have to add the slider here so for that we will use the swiper swiper.js just search for swiper.js on google swiperjs.com open this website and click on this link get started scroll down and here you can see use swiper from cdn so we will use this option just copy this link and edit here just before the closing head tag like this so we have added this link tag here within the head tag and after that we have to add this script tag just copy this script tag and add it here just above this closing body tag after that again come back to the website and scroll down here we have the html layout so let's copy this html layout and paste it here within this container let me delete this one and here we have the scroll bar we don't need the scroll bar just delete it and here you can see we have the swiper button previous and button next and this is for the swiper pagination that will be indicated just at the bottom of the image and here we have the three slides slide one slide to slide three so within these slides we will add the images so in the first one let me add one img tag and in this image we will add the file path so write the folder name images slash and the file name so this is the first slide let me remove this one and duplicate this line so this is the second slide and here we will change the image this is the second image now we will add the third slide and this is the fourth slide so we have added four images in this swiper slide after adding this if i refresh the website here you can see only first image so let me come back and just copy this class name swiper copy and paste it here in this css file with a dot because it is a class name so for this one we will add width width will be 80 percent and height height will be fit content like this and after that you can see we have the img tag here within this class name cipher slide so write this class name here then write img tag and for this image we will set the width it will be 100 after adding this again refresh the website and you can see we have some space from left side and right side now we need a space from the top also so that it will be vertically centered let's come back and within this container we will add display flex align item justify content center after adding this again refresh the website and you can see this image is in the center of the webpage and it is looking good but right now this image is not sliding for that again come to this website sliderjs.com get started and scroll down here you can see this script so let's copy this one come back to the html file and just above this closing body tag we will add script open and closing tag and within this one just paste the script that we have copied like this we have just pasted here remove this one scroll bar it is not required i will remove this one directional vertical let me remove the comments now you can see if we will click on this next arrow it will display the next image and if we click on the previous arrow it will display the previous image and it is in the loop right now you can see this indicator at the bottom which is not functional we cannot click here to change the slide to enable this one let me come back and here we have added pagination so in this one let's add clickable click able true and after that if i refresh the website you can see we can click on these dots to change the slide so it is also working and we can swipe this image like this to change the slide so this swipe feature is also working now the next thing is to add auto play for that let me come back and here we will add auto play and for this auto play we will add the delay so let's add three thousand milliseconds so it will be three seconds and here we will add disable on interaction add a comma here also after that again refresh the website and now you can see this image is changing automatically after three seconds so this auto play is also working next we have to change the colors of the next and previous icons and this indicator dot also so let me come back and here you can see we have the class name called swiper button previous and swiper button next and it is in the swiper class so let's copy this class name write it here and after that we will add this class name with a dot so this is for the back button next we will add the same thing for the next button so write a comma then dot swiper then dot swiper button next so for these buttons we will add the color let's add the color white again refresh the website and now you can see these arrow in the white color so next we have to change the color for the dots at the bottom so let me come back and here we will add the class name swiper then write the class name swiper pagination cipher pagination bullet active and here we will add the background white after adding this again refresh the website and you can see this bullet is in the white color for the active slide so now we have completed this image slider using html css and javascript and all the control feature of this slider is working fine so i hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel easy tutorials to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 244,262

Keywords: how to make image slider for website, how to create image slider on website, Image slider design using html css, javascript image slider, image slider auto play, image slider auto slide, image slider loop javascript, HTML CSS, JavaScript, Learning, Web design, Web development

Id: aRE2Zge1rUI

Length: 11min 55sec (715 seconds)

Published: Mon Jan 31 2022