You are currently viewing Image Carousel using HTML,CSS and JavaScript ( Source Code)

Image Carousel using HTML,CSS and JavaScript ( Source Code)

Image Carousel using HTML,CSS and JavaScript ( Source Code)

 Heyy, Everyone Today we are going to create an Image Carousel using HTML, CSS, and JavaScript. I can assure you that 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 Preview Of Image Carousel:-

Live Preview of the Image Carousel project.

HTML Code For Image Carousel:-

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 icon 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 Image Carousel):-

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;

}
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 Code Image Carousel:-

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:"https://i.pinimg.com/originals/57/ee/2b/57ee2b2dcfb1438479ed1dd80720a772.jpg"
    },{
        img:"https://th.bing.com/th/id/OIP.xKiE_jUn8tPueoLWXsyCPgHaEo?pid=ImgDet&rs=1"
    },{
        img:"https://th.bing.com/th/id/OIP.Sgs3Xw673xFLnE59pprVUQHaEK?pid=ImgDet&rs=1"
    },{
        img:"https://th.bing.com/th/id/R.fb535a20667848e1b1c2819904150734?rik=ansXOX3GQyAstA&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2016%2f01%2f200866-nature-landscape-water.jpg&ehk=J6q1BlBYVKEY%2bNBEQh1kxbbDT%2bTlbd5ZzfrkOKvzqUA%3d&risl=&pid=ImgRaw&r=0"
    }
]
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 😎.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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.

Leave a Reply