Step-by-Step Guide a Dynamic Image Slider with HTML, CSS, and JavaScript
Learn how to design an eye-catching image slider for your website using HTML, CSS, and JavaScript. This tutorial guides you through the process of building a responsive and stylish slider with smooth transitions. Enhance your web development skills and engage your audience with this visually appealing slider. Watch now and take your website to the next level!
Introduction:
In this tutorial, we'll explore the art of crafting an image slider that goes beyond the basics. Enhance your web design skills as we create a responsive and eye-catching slider that will captivate your website visitors. As we progress, you'll gain insights into best practices for creating engaging user interfaces and optimizing performance.
Code (HTML, CSS, JS) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.slider-container{
width:80%;
margin: auto;
overflow: hidden;
position: relative;
border: 2px solid #333;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.slides{
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide{
min-width:100%;
box-sizing: border-box;
}
img{
width: 100%;
height: 300px;
}
.prev, .next{
cursor:pointer;
position: absolute;
top: 50%;
width: auto;
padding:16px;
margin-top: -22px;
color:white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
background-color: rgba(0,0,0,0.5);
}
.next{
right:0;
}
.prev:hover, .next:hover{
background-color: rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slides">
<div class="slide">
<img src="image\image2.jpg" alt="banner 1">
</div>
<div class="slide">
<img src="image\image4.jpg" alt="banner 1">
</div>
<div class="slide">
<img src="image\image6.jpeg" alt="banner 1">
</div>
</div>
<div class="prev" onclick="prevSlide()" > < </div>
<div class="next" onclick="nextSlide()" > > </div>
</div>
<script>
let currentSlide = 0;
function showSlide(slideIndex)
{
switch(slideIndex)
{
case 0:
document.querySelector('.slides').style.transform='translateX(0)';
break;
case 1:
document.querySelector('.slides').style.transform='translateX(-100%)';
break;
case 2:
document.querySelector('.slides').style.transform='translateX(-200%)';
break;
default:
document.querySelector('.slides').style.transform='translateX(0)';
}
currentSlide = slideIndex;
}
function nextSlide()
{
currentSlide = (currentSlide+1)%3;
showSlide(currentSlide);
}
function prevSlide()
{
currentSlide = (currentSlide-1+3)%3;
showSlide(currentSlide);
}
setInterval(nextSlide,3000);
showSlide(currentSlide);
</script>
</body>
</html>
Share this article
Sandipan Kr Bag
I'm a dedicated full-stack developer, entrepreneur, and the proud owner of ocec.org.in , hailing from the vibrant country of India. My passion lies in creating informative tutorials and sharing valuable tips that empower fellow artisans in their journey. With a deep-rooted love for technology, I've been an ardent enthusiast of PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, Codeigniter, and Bootstrap from their earliest days. My philosophy revolves around the values of hard work and unwavering consistency, driving me to continuously explore, create, and share my knowledge with the tech community.
*Hire Me
Related Posts
Make a Secure Laravel Login System for Admins and Users: A Step-by-Step Guide
0 Comments
Load more Comments
Post a Comment
About me
i am sandipan kumar bag
Latest Posts
Arithmetic operators in java
2 weeks ago
List of all the operators in Java
2 weeks ago
20 Employee Data for Practice in a Relational Database Management System (RDBMS)
3 weeks ago
helllo