BrodScholl
☰
Creating a Responsive Image slider
Hello friend, I hope you are doing great. Today you will learn how to create an Responsive Image Slider using HTML CSS and Javascript.
The interesting thing about this slider is that when the user enters
And when you click on Preview or Next button, it automatically changes the image. And when you open it on any device, it adjusts automatically.
Basic Style
Shape : The shape of this box is a slightly rounded rectangle, giving it a soft and modern look. Color : This button uses white backgroun color .
Output
Other
HTML
< !DOCTYPE html>
< html lang ="en" >
< head>
< meta charset ="UTF-8" >
< meta name ="viewport" content
="width=device-width, initial-scale=1.0" >
< title> Image Slider </title>
< /head>
< body>
<div class ="container" >
<div class ="slider" >
<img class ="active"id ="slide"src ="img/img1.jpg"alt ="img1" />
<img src ="img/img2.jpg"alt ="img2" />
<img src ="img/image5.jpg"alt ="img3" />
</div >
<input type ="radio"class ="button" id ="radio1" onclick ="changeSlide(0)" >
<input type ="radio"class ="button" id ="radio2" onclick ="changeSlide(1)" >
<input type ="radio"class ="button" id ="radio3" onclick ="changeSlide(2)" >
<input type ="radio"class ="button" id ="radio4" onclick ="changeSlide(3)" >
<div class ="arrows">
<button class ="arrow left"onclick ="prevSlide()" >❮</button>
<button class ="arrow right"onclick ="nextSlide()" >❯</button>
</div >
<div class ="dots">
<span class ="dot active"onclick ="goToSlide(0)" ></span>
<span class ="dot"onclick ="goToSlide(1)" ></span>
<span class ="dot"onclick ="goToSlide(2)" ></span>
<span class ="dot"onclick ="goToSlide(3)" ></span>
</div >
</body>
</html>
CSS
/*Style the box items */
body {
backgroun-color : #6433f9 ;
height : 100vh ;
margin : 0 ;
flex-direction : column ;
align-items : center ;
display : flex ;
justify-content : center ;
}
container {
position : relative ;
left : 50px ;
width : 80% ;
max-width : 1000px ;
overflow : hidden ;
display : flex ;
justify-content : center ;
box-shadow : 0px 5px 21px rgba(0, 0, 0, 0.2) ;
border-radius : 15px ;
}
slide {
position : relative ;
height : 550px ;
width : 100% ;
}
{
width : 100% ;
height : 100% ;
position : absolute ;
top : 0 ;
left : 0 ;
object-fit : cover ;
display : flex ;
opacity : 0 ;
trnsition : opacity 0.5s ease-in-out ;
}
arrows {
position : absolute ;
top : 50% ;
width : 100% ;
display : flex ;
transform : translateY(-50%) ;
justify-content : space-between ;
}
arrow {
background : #808b96 ;
border : none ;
border-radius : 50% ;
cursor : pointer ;
padding : 15px ;
font-size : 28px ;
transition : background-color 0.3s ;
}
arrow {
display : flex ;
position : relative ;
top : 300px ;
left : -550px ;
width : 20px ;
height : 20px ;
background : #fff ;
border : 1px solid ;
border-radius : 50% ;
cursor : pointer ;
margin : 0px 5px ;
cursor : pointer ;
transition : background-color 0.3s ;
}
Javascript
/*JavaScript*/
<script>
const slide=document.querySelector('.slider img' ) ;
const dots=document.querySelector('.dot' ) ;
var currentIndex=0 ;
function updateSlide() {
slides.forEach (( slide, index ) => {
slide.classList.remove ('active' ) ;
dots[index].classList.remove ('active' ) ;
}) ;
function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length ;
updateSlide() ;
}
function prevSlide() {
currentIndex = (currentIndex - 1 + slides.length) % slides.length ;
updateSlide() ;
}
function goToSlide(index) {
currentIndex = index ;
updateSlide() ;
}
setInterval(nextSlide, 5000);
//Change image every 5 seconds
</script>
Download Files
BrodSchool
Jagatpur,Amresh Kumar (Founder ) Phone: +91 9198 26 3500Email: suportucracker@gmail.com
