-
Notifications
You must be signed in to change notification settings - Fork 0
/
ilearesa gallery.html
154 lines (145 loc) · 6.31 KB
/
ilearesa 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<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">
<meta name="description" content="Photos from Ile Aresa International, check our gallery here">
<title>Ile Aresa - Gallery</title>
<link rel="shortcut icon" href="logo.jpg" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="loader"><div id="load"></div></span>
<header>
<li><a href="index.html"><img src="logo.jpg" alt="logo"></a></li>
<nav>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="ilearesa events.html">Events</a></li>
<li><a href="ilearesa gallery.html" id="active">Gallery</a></li>
<li><a href="ilearesa contact.html">Contact</a></li>
<li id="close"><a onclick="clse()">Close Menu</a></li>
</ul>
</nav>
<img src="svg/more.png" id="open" onclick="opn()">
</header>
<main>
<div class="carousel-container">
<div class="carousel">
<div class="carousel-item">
<img src="gallery/ose ifa.jpeg" alt="Ose Ifa and Itadogun Ifa">
<div class="caption">Ose Ifa and Itadogun ifa</div>
</div>
<div class="carousel-item">
<img src="gallery/image 1.png" alt="Olúwo Chief Arẹ̀sà">
<div class="caption">Olúwo Chief Arẹ̀sà</div>
</div>
<div class="carousel-item">
<img src="gallery/image 2.png" alt="Olúwo Chief Arẹ̀sà praying">
<div class="caption">Olúwo Chief Arẹ̀sà praying</div>
</div>
<div class="carousel-item">
<img src="gallery/image 3.png" alt="Olúwo Chief Arẹ̀sà and his colleagues">
<div class="caption">Olúwo Chief Arẹ̀sà and his colleagues</div>
</div>
<div class="carousel-item">
<img src="gallery/image 4.png" alt="Olúwo Chief Arẹ̀sà perfoming a ritual">
<div class="caption">Olúwo Chief Arẹ̀sà perfoming a ritual</div>
</div>
<div class="carousel-item">
<img src="gallery/image 5.png" alt="Olúwo Chief Arẹ̀sà">
<div class="caption">Olúwo Chief Arẹ̀sà</div>
</div>
<div class="carousel-item">
<img src="gallery/image 6.png" alt="Olúwo Chief Arẹ̀sà">
<div class="caption">Olúwo Chief Arẹ̀sà</div>
</div>
<div class="carousel-item">
<img src="gallery/image 7.png" alt="Olúwo Chief Arẹ̀sà">
<div class="caption">Olúwo Chief Arẹ̀sà</div>
</div>
<div class="carousel-item">
<img src="gallery/image 8.png" alt="Olúwo Chief Arẹ̀sà Chanting Ifá">
<div class="caption">Olúwo Chief Arẹ̀sà Chanting Ifá</div>
</div>
<div class="carousel-item">
<img src="gallery/image 9.png" alt="Drummers During Ilé Arèsà Annual Ifá Festival">
<div class="caption">Drummers During Ilé Arèsà Annual Ifá Festival</div>
</div>
<div class="carousel-item">
<img src="gallery/image 10.png" alt="Olúwo Chief Arẹ̀sà Completing an Ìdáfá">
<div class="caption">Olúwo Chief Arẹ̀sà Completing an Ìdáfá</div>
</div>
<div class="carousel-item">
<img src="gallery/image 11.png" alt="Initiation at Ilé Arèsà">
<div class="caption">Initiation at Ilé Arèsà</div>
</div>
<div class="carousel-item">
<img src="gallery/image 12.png" alt="Olúwo Chief Arẹ̀sà Completing an Ìdáfá">
<div class="caption">Olúwo Chief Arẹ̀sà Completing an Ìdáfá</div>
</div>
</div>
<div class="carousel-arrows">
<img src="svg/next.png" alt="previous" class="arrow arrow-left">
<img src="svg/next.png" alt="next" class="arrow arrow-right">
</div>
</div>
</main>
<footer>
<p>© 2023 Ile Aresa International.</p>
<p>Site created by <a href="https://ariyoaresa.me" aria-label="Ariyo Aresa's website">Ariyo Aresa</a>. All rights reserved.</p>
</footer>
</body>
<script src="script.js"></script>
<!--For the image carousel-->
<script>
document.addEventListener("DOMContentLoaded", function () {
const carousel = document.querySelector(".carousel");
const items = carousel.querySelectorAll(".carousel-item");
const arrowLeft = document.querySelector(".arrow-left");
const arrowRight = document.querySelector(".arrow-right");
let currentIndex = 0;
let touchStartX = 0;
let touchEndX = 0;
const minSwipeDistance = 50;
function showSlide(index) {
items.forEach(function (item) {
item.style.transform = `translateX(-${index * 100}%)`;
});
}
function slideToNext() {
currentIndex = (currentIndex + 1) % items.length;
showSlide(currentIndex);
}
function slideToPrevious() {
currentIndex = (currentIndex - 1 + items.length) % items.length;
showSlide(currentIndex);
}
arrowLeft.addEventListener("click", slideToPrevious);
arrowRight.addEventListener("click", slideToNext);
document.addEventListener("keydown", function (event) {
if (event.key === "ArrowLeft") {
slideToPrevious();
} else if (event.key === "ArrowRight") {
slideToNext();
}
});
carousel.addEventListener("touchstart", function (event) {
touchStartX = event.touches[0].clientX;
});
carousel.addEventListener("touchend", function (event) {
touchEndX = event.changedTouches[0].clientX;
handleSwipe();
});
function handleSwipe() {
const swipeDistance = touchEndX - touchStartX;
if (swipeDistance > minSwipeDistance) {
slideToPrevious();
} else if (swipeDistance < -minSwipeDistance) {
slideToNext();
}
}
});
</script>
</html>