Scribd
Upload
2 views5 pages

Doctype HTML

Uploaded by

mohdfaiz006786
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views5 pages

Doctype HTML

Uploaded by

mohdfaiz006786
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

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="styles.css">

</head>

<body>

<div class="slider-container">

<div class="slider" id="slider">

<div class="slide">

<iframe src="https://www.youtube.com/embed/EfVICyUq5NQ" title="Video 1"></iframe>

</div>

<div class="slide">

<iframe src="https://www.youtube.com/embed/FBMRMjHvR6w" title="Video


2"></iframe>

</div>

<div class="slide">

<iframe src="https://www.youtube.com/embed/jpGWRiJAudY" 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="script.js"></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 = document.getElementById('slider');

let currentSlide = 0; // Start with the first slide

const totalSlides = slider.children.length;

document.getElementById('nextBtn').addEventListener('click', () => {

currentSlide = (currentSlide + 1) % totalSlides; // Loop around after the last slide

updateSlider();

});

document.getElementById('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

slider.style.transform = `rotateY(${angle}deg)`;

You might also like