-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgallery.html
92 lines (83 loc) · 4.31 KB
/
gallery.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta information -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/gallery.css" />
<title>Galerie</title>
</head>
<body>
<!-- ================================================== -->
<!-- Gallery Carousel Container -->
<!-- ================================================== -->
<div class="carousel-container">
<h2>Galerie</h2>
<!-- Carousel Section -->
<div class="carousel">
<!-- Previous Slide Button -->
<button class="prev" onclick="prevSlide()">❮</button>
<!-- Carousel Slides -->
<div class="carousel-slides">
<!-- Carousel Images -->
<img src="media/images/fritz-jagger-sitting_hoch.jpeg" alt="Bild 1" class="carousel-image" />
<img src="media/images/fritz-zwinkert-schwarzweiß_hoch.jpeg" alt="Bild 2" class="carousel-image" />
<img src="media/images/fritz-hawai_hoch.jpeg" alt="Bild 3" class="carousel-image" />
<img src="media/images/fritz-gitarre-bühne_hoch.jpeg" alt="Bild 4" class="carousel-image" />
<img src="media/images/fritz-locken-gitarre_quadrat.jpeg" alt="Bild 5" class="carousel-image" />
<img src="media/images/fritz-seiteunscharf_hoch.jpeg" alt="Bild 6" class="carousel-image" />
<img src="media/images/jamule-fritz-soundcheck_hoch.jpeg" alt="Bild 7" class="carousel-image" />
<img src="media/images/fritz-smile-sitting_hoch.jpeg" alt="Bild 8" class="carousel-image" />
<img src="media/images/fritz_gitarre_hoch.jpeg" alt="Bild 9" class="carousel-image" />
<img src="media/images/fritz_schwarz-weiß_hoch.jpeg" alt="Bild 10" class="carousel-image" />
<img src="media/images/gitarre-schwarzweiß_quer.jpeg" alt="Bild 11" class="carousel-image" />
<img src="media/images/drummer_hoch.jpeg" alt="Bild 12" class="carousel-image" />
<img src="media/images/fritz-mayer_hoch.jpeg" alt="Bild 13" class="carousel-image" />
<img src="media/images/fritz-backstage-smile_quer.jpeg" alt="Bild 14" class="carousel-image" />
<img src="media/images/fritz-marshall-sitting_quadrat.jpeg" alt="Bild 15" class="carousel-image" />
<img src="media/images/jamule_hoch.jpeg" alt="Bild 16" class="carousel-image" />
<img src="media/images/fritz-backstage_quer.jpeg" alt="Bild 17" class="carousel-image" />
<img src="media/images/konzert-bühne_hoch.jpeg" alt="Bild 18" class="carousel-image" />
<img src="media/images/fritz-gitarre-bühne_hoch.jpeg" alt="Bild 19" class="carousel-image" />
<img src="media/images/milano-fritz-bühne_quer.jpeg" alt="Bild 20" class="carousel-image" />
<img src="media/images/fritzhut-old_hoch.jpeg" alt="Bild 21" class="carousel-image" />
</div>
<!-- Next Slide Button -->
<button class="next" onclick="nextSlide()">❯</button>
</div>
</div>
<!-- ================================================== -->
<!-- Back to Home Button -->
<!-- ================================================== -->
<div class="back-home-button2">
<a href="index.html">Zurück zur Startseite</a>
</div>
<!-- ================================================== -->
<!-- JavaScript for Carousel Functionality -->
<!-- ================================================== -->
<script>
let currentSlide = 0;
// Function to display the current slide
function showSlide(index) {
const slides = document.querySelectorAll('.carousel-image');
const totalSlides = slides.length;
currentSlide = (index + totalSlides) % totalSlides; // Ensures index loops
const slideWidth = slides[0].clientWidth; // Width of one slide
const carouselSlides = document.querySelector('.carousel-slides');
carouselSlides.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
}
// Function to go to the next slide
function nextSlide() {
showSlide(currentSlide + 1);
}
// Function to go to the previous slide
function prevSlide() {
showSlide(currentSlide - 1);
}
// Initialize carousel on page load
document.addEventListener('DOMContentLoaded', () => {
showSlide(currentSlide);
});
</script>
</body>
</html>