Image slider| Image carousel using HTML,CSS and Javascript







Image slider| Image carousel using HTML,CSS and Javascript

 Heyy, Everyone Today we are going to create an Image slider using HTML, CSS, Javascript. I can assure you that after completely reading this blog and making this project will boost your confidence and level up your skills in frontend dev. First of all, let’s look at How this looks after completing the code.

Live Server:-

Live Server of the Image slider project.

See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.

HTML CODE(LAYOUT OF THE WEBSITE):-

HTML is only the structure of the website as we are adding the images dynamically(through javascript) so our HTML code will be easy. we are developing an image sider of 4 images. You can do it for as many as you want. In the body section, I added a heading named class as per name it contains heading of the content Image slider. I am using the left and right arrows for the next and previous images so I used an icon package from ion-icon named website If you also want to add some icons to your website you can choose favicon or any other icons websites. I have also used four buttons which you can see in the live server at the bottom of the image four round buttons If you click on the 1st button it will show the first image similarly for the 2nd,3rd, and 4th. so I have used some inline javascript codes like prev, next and imageshow function will be called by the corresponding button when it is got clicked.
I have also linked the CSS file and the javascript file. you can change the file’s name as you name your CSS and javascript file in the code.

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="heading">Image-Slider</div>
<div class="img-container">
<img src="./img/1.jpg" alt="" class="img">
<div class="div prev" onclick="prev()"><ion-icon name="arrow-back"></ion-icon></div>
<div class="div next" onclick="next()"><ion-icon name="arrow-forward"></ion-icon></div>
<div class="radio">
<button class="radio-btn" id="radio1" onclick="imageShow(0)"></button>
<button class="radio-btn" id="radio2" onclick="imageShow(1)"></button>
<button class="radio-btn" id="radio3" onclick="imageShow(2)"></button>
<button class="radio-btn" id="radio4" onclick="imageShow(3)"></button>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.js"></script>
<script src="./script.js"></script>
</body>
</html>

CSS (Styling the Webpage):-

I have used only simple styling concepts like flexbox and position like absolute and relative some border-box properties.
 *{  
margin: 0;
padding: 0;
box-sizing:border-box;
}
body{
display:flex;
min-height:100vh;
width:100vw;
justify-content: center;
align-items:center;
flex-direction: column;
}
.img-container{
width:60vw;
object-fit: cover;
position: relative;
border:4px solid red;
border-radius:15px;
overflow:hidden;
}
.div{
position:absolute;
visibility: hidden;
}
.next{
top:50%;
right:0;
transform: translate(0,50%);
}
.prev{
top:50%;
left:0;
transform: translate(0,50%);
}
img{
position:relative;
width:60vw;
transition-duration:1s;
}

ion-icon:active{
color:red;
}
ion-icon{
width:15px;
height:15px;
padding:10px;
background-color: white;
cursor: pointer;
}
.img-container:hover .div{
visibility:visible;
}
.radio{
position: absolute;
bottom:0;
display: flex;
justify-content: center;
width:100%;
}
.radio-btn{
width:1vw;
height:1vw;
border-radius: 50%;
background-color:white;
margin:10px;
padding:10px;
border:3px solid rgb(194, 56, 56);
margin-bottom:5px;
transition-duration:1s;
}
.heading{
font-weight: bolder;
font-size:20px;
margin-bottom: 10px;
}

Javascript Codes:-

So I have used images that are present in my local drive so If you want to copy the same code please assure that at the place of the image source you have placed the right image URL /image position in the local drive. I have used simple DOM manipulation and set the Interval function which helps to run the function after the same interval repeatedly.
 const images=[  
{
img:"./img/1.jpg"
},{
img:"./img/2.jpg"
},{
img:"./img/3.jpg"
},{
img:"./img/4.jpg"
}
]
var i=0;
img=document.querySelector(".img")
const radio1=document.getElementById("radio1")
const radio2=document.getElementById("radio2")
const radio3=document.getElementById("radio3")
const radio4=document.getElementById("radio4")
const radioBtn=document.querySelectorAll(".radio-btn")
var type;
function next(){
interval(false)
i=(i+1)%(images.length)
img.src=images[i].img
radio(i)
interval(true)
}
function prev(){
interval(false)
i=(i-1)%(images.length)
if(i<0){
i=3
}
radio(i)
img.src=images[i].img
interval(true)
}
function interval(e){
if(e){
type= setInterval(()=>{
img.src=images[i].img
radio(i);
i=(i+1)%(images.length);
},4000)
}
if(!e){
clearInterval(type)
}
}
window.addEventListener("DOMContentLoaded",()=>{
interval(true)
})
function radio(e){
if(e==0){
radio3.style.backgroundColor="white"
radio2.style.backgroundColor="white"
radio4.style.backgroundColor="white"
radio1.style.backgroundColor="red"
}
else if(e==1){
radio3.style.backgroundColor="white"
radio1.style.backgroundColor="white"
radio4.style.backgroundColor="white"
radio2.style.backgroundColor="red"
}
else if(e==2){
radio2.style.backgroundColor="white"
radio1.style.backgroundColor="white"
radio4.style.backgroundColor="white"
radio3.style.backgroundColor="red"
}
else if(e==3){
radio3.style.backgroundColor="white"
radio2.style.backgroundColor="white"
radio1.style.backgroundColor="white"
radio4.style.backgroundColor="red"
}
}
function imageShow(e){
interval(false)
img.src=images[e].img
radio(e)
interval(true)
}
I hope you liked it Wait, Did you still not implement it So why are you waiting, go and implement it now 😎.
If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.
You can follow me on Instagram.
Written by @Himanshu Singh.

Share on:

Leave a Comment