<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Video Gallery Slider</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="slider-container">
<div class="slider" id="slider">
<div class="slide">
<iframe src="[Link] title="Video 1"></iframe>
</div>
<div class="slide">
<iframe src="[Link] title="Video
2"></iframe>
</div>
<div class="slide">
<iframe src="[Link] title="Video 3"></iframe>
</div>
</div>
<!-- Navigation buttons -->
<button class="nav-button prev" id="prevBtn">Previous</button>
<button class="nav-button next" id="nextBtn">Next</button>
</div>
<script src="[Link]"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
body {
font-family: Arial, sans-serif;
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
.slider-container {
width: 60%;
max-width: 800px;
perspective: 1000px;
position: relative;
.slider {
display: flex;
transform-style: preserve-3d;
transition: transform 1s ease-in-out;
width: 100%;
height: 250px;
.slide {
min-width: 100%;
height: 100%;
position: absolute;
transform-origin: center;
.slider iframe {
width: 80%;
height: 80%;
margin: 0 auto;
display: block;
border: none;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #007BFF;
border: none;
color: white;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
user-select: none;
.prev {
left: 10px;
.next {
right: 10px;
.nav-button:hover {
background-color: #0056b3;
.slide:nth-child(1) {
transform: translateZ(0) rotateY(0deg);
.slide:nth-child(2) {
transform: rotateY(120deg) translateZ(400px);
.slide:nth-child(3) {
transform: rotateY(-120deg) translateZ(400px);
}
const slider = [Link]('slider');
let currentSlide = 0; // Start with the first slide
const totalSlides = [Link];
[Link]('nextBtn').addEventListener('click', () => {
currentSlide = (currentSlide + 1) % totalSlides; // Loop around after the last slide
updateSlider();
});
[Link]('prevBtn').addEventListener('click', () => {
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides; // Loop around before the first slide
updateSlider();
});
function updateSlider() {
const angle = currentSlide * -120; // Each slide is separated by 120 degrees in 3D space
[Link] = `rotateY(${angle}deg)`;
