<head> <link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet"></head>  
<body><div class="heading">Image-Slider</div>
    <div class="img-container">
        <img src="https://i.pinimg.com/originals/57/ee/2b/57ee2b2dcfb1438479ed1dd80720a772.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/[email protected]/dist/ionicons/ionicons.esm.js"></script><script
nomodule="" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
    </body>

*{
    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;
}


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)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.