<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.