Image Carousel Using JS
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Carousel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.carousel__container {
width: 100%;
}
.carousel__slides {
display: none;
}
.carousel__slides img {
width: 100%;
height: 600px;
overflow: hidden;
object-fit: cover;
}
.carousel__nav-arrow {
position: absolute;
display: block;
border-radius: 50%;
font-size: 48px;
box-shadow: 0px 0px 8px 10px #fff;
background-color: #fff;
top: 40%;
}
.carousel__nav-arrow:hover {
box-shadow: 0px 0px 8px 10px rgb(182, 181, 168);
background-color: rgb(182, 181, 168);
}
.carousel__nav-left-arrow {
left: 20px;
}
.carousel__nav-right-arrow {
right: 20px;
}
.carousel__nav-dot-container {
position: absolute;
display: flex;
justify-content: center;
bottom: 80px;
width: 100%;
height: 60px;
}
.carosuel__nav-dot {
content: "";
display: block;
border-radius: 50%;
width: 20px;
height: 20px;
margin: 10px;
background-color: #fff;
}
.carosuel__nav-dot:hover {
background-color: rgb(182, 181, 168);
}
.carousel__slide-text {
position: absolute;
display: flex;
justify-content: center;
bottom: 180px;
width: 100%;
height: 60px;
color: #fff;
font-size: 28px;
font-family: monospace;
text-shadow: 2px 2px 6px #000000;
}
.photo-credits {
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-family: monospace;
flex-direction: column;
}
</style>
</head>
<body>
<div class="carousel__container">
<div class="carousel__slide-container">
<div class="carousel__slides carousel__slide1" id="carousel__slide1" style="display:block">
<img src="https://images.freeimages.com/images/large-previews/e04/yellow-frontal-with-ivy-1228121.jpg" alt="Slide 1">
<span class="carousel__slide-text">PHOTO BY freeimages.com</span>
</div>
<div class="carousel__slides carousel__slide2" id="carousel__slide2">
<img src="https://images.freeimages.com/images/large-previews/4b4/beach-house-1225387.jpg" alt="Slide 2">
<span class="carousel__slide-text">PHOTO BY freeimages.com</span>
</div>
<div class="carousel__slides carousel__slide3" id="carousel__slide3">
<img src="https://images.freeimages.com/images/large-previews/f38/beach-1551121.jpg" alt="Slide 3">
<span class="carousel__slide-text">PHOTO BY freeimages.com</span>
</div>
</div>
<div class="carousel__nav-container">
<span class="carousel__nav-arrow carousel__nav-left-arrow" id="carousel__nav-left-arrow"><i
class="fa-solid fa-circle-left"></i></span>
<span class="carousel__nav-arrow carousel__nav-right-arrow" id="carousel__nav-right-arrow"><i
class="fa-solid fa-circle-right"></i></span>
<div class="carousel__nav-dot-container">
<div class="carosuel__nav-dot carosuel__nav-dot1" data-id="1"></div>
<div class="carosuel__nav-dot carosuel__nav-dot2" data-id="2"></div>
<div class="carosuel__nav-dot carosuel__nav-dot3" data-id="3"></div>
</div>
</div>
</div>
<div class="photo-credits">
<p>
Photo by <a href="https://www.freeimages.com/">freeimages.com</a>
</p>
</div>
<script>
class Slide {
currentSlide = 1;
nextSlide = 2;
totalSlides = 1;
constructor(totalSlides) {
this.totalSlides = totalSlides;
}
changeSlide(direction, nextSlide = 0) {
document.getElementById(`carousel__slide${this.currentSlide}`).style.display = "none";
if (direction == 'left') {
this.currentSlide -= 1;
if (this.currentSlide < 1) {
this.currentSlide = this.totalSlides;
}
} else if (direction == 'right') {
this.currentSlide += 1;
if (this.currentSlide > this.totalSlides) {
this.currentSlide = 1;
}
} else if (direction == 'direct') {
this.currentSlide = nextSlide;
}
document.getElementById(`carousel__slide${this.currentSlide}`).style.display = "block";
}
}
slide = new Slide(3);
let slideLeftArrow = document.getElementById('carousel__nav-left-arrow');
slideLeftArrow.addEventListener('click', () => {
slide.changeSlide('left');
});
let slideRightArrow = document.getElementById('carousel__nav-right-arrow');
slideRightArrow.addEventListener('click', () => {
slide.changeSlide('right');
});
let carouselNavDot = document.getElementsByClassName('carosuel__nav-dot');
for (var i = 0; i < carouselNavDot.length; i++) {
carouselNavDot[i].addEventListener('click', (e) => {
slide.changeSlide('direct', e.target.getAttribute('data-id'));
})
}
</script>
</body>
</html>
See the Pen Untitled by Muhammad Habib (@mhabib555) on CodePen.
Comments
Post a Comment