🎥 Ready to level up your web development skills? Join us in this tutorial where we guide you through the process of creating a dynamic Image Slider using HTML, CSS, and JavaScript! 🚀 Explore the magic of coding as we break down each step, empowering both beginners and seasoned developers to enhance their projects with a stunning image carousel. From seamless transitions to customizable features, this tutorial covers it all. Elevate your website's visual appeal and engage your audience with an eye-catching image slider. Let's bring your designs to life! 💻🌟
Don't forget to like, share, and subscribe for more web development tutorials and tips. If you have any questions or need further assistance, feel free to leave a comment, and we'll be happy to help you out. Happy coding!
index.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>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/b186863b7d.js"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="slide">
<div class="item" style="background-image: url(Image/Adam\'s\ peak\ \ sripadaya.jpg);">
<div class="content">
<div class="name">Siripadaya | Adam's Peak</div>
<div class="des">Description Here....</div>
<button>Read More...</button>
</div>
</div>
<div class="item" style="background-image: url(Image/dunhinda\ ella.jpg);">
<div class="content">
<div class="name">Dunhinda Ella</div>
<div class="des">Description Here....</div>
<button>Read More...</button>
</div>
</div>
<div class="item" style="background-image: url(Image/lotus-tower.jpg);">
<div class="content">
<div class="name">Lotus Tower</div>
<div class="des">Description Here....</div>
<button>Read More...</button>
</div>
</div>
<div class="item" style="background-image: url(Image/nilaveli\ beach.jpg);">
<div class="content">
<div class="name">Nilaveli Beach</div>
<div class="des">Description Here....</div>
<button>Read More...</button>
</div>
</div>
<div class="item" style="background-image: url(Image/ruwanweli\ maha\ seya.jpg);">
<div class="content">
<div class="name">Ruwanweli Maha Seya</div>
<div class="des">Description Here....</div>
<button>Read More...</button>
</div>
</div>
<div class="item" style="background-image: url(Image/sigiriya.png);">
<div class="content">
<div class="name">Sigiriya</div>
<div class="des">Description Here....</div>
<button>Read More...</button>
</div>
</div>
<div class="item" style="background-image: url(Image/Temple\ of\ the\ tooth\ relic.jpg);">
<div class="content">
<div class="name"></div>
<div class="des"></div>
<button>Read More...</button>
</div>
</div>
</div>
<div class="button">
<button class="previous"><i class="fa-solid fa-arrow-left"></i></button>
<button class="next"><i class="fa-solid fa-arrow-right"></i></button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #fff;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1000px;
height: 550px;
box-shadow: 0 30px 45px black;
}
.container .slide .item{
width: 200px;
height: 300px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
box-shadow: 0 30px 45px gray;
background-position: 50% 50%;
background-size: cover;
display: inline-block;
transition: 0.5s;
border-radius: 15px;
}
.slide .item:nth-child(1), .slide .item:nth-child(2){
top: 0;
left: 0;
transform: translate(0,0);
border-radius: 8px;
width: 100%;
height: 100%;
}
.slide .item:nth-child(3){
left: 50%;
}
.slide .item:nth-child(4){
left: calc(50% + 220px);
}
.slide .item:nth-child(5){
left: calc(50% + 440px);
}
.slide .item:nth-child(n +6){
left: calc(50% + 660px);
opacity: 0;
}
.item .content{
position: absolute;
top: 50%;
left: 100px;
width: 300px;
text-align: left;
color: #fff;
transform: translate(0, -50%);
font-family: Georgia, 'Times New Roman', Times, serif;
display: none;
}
.slide .item:nth-child(2) .content{
display: block;
}
.content .name{
font-size: 35px;
text-transform: uppercase;
font-weight: bold;
opacity: 0;
animation: animate 1s ease-in-out 1 forwards;
}
.content .des{
margin-top: 10px;
margin-bottom: 20px;
opacity: 0;
animation: animate 1s ease-in-out 0.3s 1 forwards;
}
.content button{
padding: 10px 20px;
border: none;
cursor: pointer;
animation: animate 1s ease-in-out 0.6s 1 forwards;
}
@keyframes animate {
from{
opacity: 0;
transform: translate(0, 100px);
filter: blur(30px);
}
to{
opacity: 1;
transform: translate(0);
filter: blur(0);
}
}
.button{
width: 100%;
text-align: center;
position: absolute;
bottom: 20px;
}
.button button{
margin: 0 5px ;
border: 1px solid #000;
transition: 0.2s;
width: 40px;
height: 35px;
border-radius: 8px;
cursor: pointer;
border-radius: 3px;
}
.button button:hover{
background: gray;
color: black;
}
script.js
let next = document.querySelector('.next')
let previous = document.querySelector('.previous')
next.addEventListener('click', function(){
let items = document.querySelectorAll('.item')
document.querySelector('.slide').appendChild(items[0])
})
previous.addEventListener('click', function(){
let items = document.querySelectorAll('.item')
document.querySelector('.slide').prepend(items[items.length - 1])
})
Comments
Post a Comment