code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Image Carousel</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #0d0d0d;
overflow: hidden;
transition: background-image 0.5s ease;
background-size: cover;
background-position: center;
}
/* Carousel Container */
.carousel {
position: relative;
width: 130px;
height: 130px;
transform-style: preserve-3d;
perspective: 1000px;
transition: transform 1s;
}
/* Image Styles */
.carousel img {
position: absolute;
height: 100%;
width: 100%;
/* width: 150px;
height: 150px; */
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 110, 199, 0.3);
transform-origin: center;
transition: transform 0.5s, filter 0.5s;
opacity: 0.8;
}
/* Position each image around the Y-axis */
.carousel img:nth-child(1) { transform: rotateY(0deg) translateZ(150px); }
.carousel img:nth-child(2) { transform: rotateY(72deg) translateZ(150px); }
.carousel img:nth-child(3) { transform: rotateY(144deg) translateZ(150px); }
.carousel img:nth-child(4) { transform: rotateY(216deg) translateZ(150px); }
.carousel img:nth-child(5) { transform: rotateY(288deg) translateZ(150px); }
/* Control Icons */
.controls {
position: absolute;
bottom: 20px;
left: 20px;
display: flex;
gap: 10px;
}
.controls button {
width: 40px;
height: 40px;
font-size: 18px;
border: none;
background-color: #181616;
color: #fff;
cursor: pointer;
border-radius: 50%;
transition: background-color 0.3s;
}
.controls button:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<img src="nature1.jpg" alt="Image 1">
<img src="nature2.jpg" alt="Image 2">
<img src="nature3.jpg" alt="Image 3">
<img src="nature4.jpeg" alt="Image 4">
<img src="nature5.jpg" alt="Image 5">
</div>
<div class="controls">
<button onclick="rotateCarousel(-1)">⬅️</button>
<button onclick="rotateCarousel(1)">➡️</button>
</div>
<script>
let angle = 0;
let currentIndex = 0;
const images = document.querySelectorAll('.carousel img');
const backgroundImages = [
'nature1.jpg', 'nature2.jpg', 'nature3.jpg', 'nature4.jpeg', 'nature5.jpg'
];
function rotateCarousel(direction) {
angle += direction * 72; // 72 degrees for a 5-image ring
document.getElementById("carousel").style.transform = `rotateY(${angle}deg)`;
// Update index to find the current front image
currentIndex = (currentIndex - direction + images.length) % images.length;
updateImageFocus();
}
function updateImageFocus() {
// Reset all images to default opacity and brightness
images.forEach((img, index) => {
img.style.filter = "brightness(0.4)";
img.style.opacity = "0.7";
});
// Highlight the current front-facing image
images[currentIndex].style.filter = "brightness(1.5)";
images[currentIndex].style.opacity = "1";
// Update background to match the current image
document.body.style.backgroundImage = `url(${backgroundImages[currentIndex]})`;
}
// Initialize focus on the first image
updateImageFocus();
</script>
</body>
</html>
Top comments (0)