troy/troylusty.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: shuffle hero slideshow projects
All checks were successful
Docker / build-and-push-image (push) Successful in 2m49s
Details

Browse source
This commit is contained in:
Troy 2025-07-18 23:29:03 +01:00
parent 4e9ffa8771
commit 8e42e17da5
Signed by: troy
GPG key ID: DFC06C02ED3B4711
5 changed files with 82 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/Slideshow.astro
View file

@ -43,21 +43,33 @@ const { interval = 3000, images } = Astro.props;
</div>
<script>
const images = document.querySelectorAll<HTMLElement>("[data-slide-index]");
const images = Array.from(
document.querySelectorAll<HTMLElement>("[data-slide-index]"),
);
let currentImageIndex = 0;
const interval =
Number(
(
document
.querySelector<HTMLElement>("[data-slide-index]")
?.closest(".relative") as HTMLElement
)?.dataset?.interval,
) || 3000;
const closestRelativeElement = document
.querySelector<HTMLElement>("[data-slide-index]")
?.closest(".relative") as HTMLElement | null;
const interval = Number(closestRelativeElement?.dataset?.interval) || 3000;
for (let i = images.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[images[i], images[j]] = [images[j], images[i]];
}
images.forEach((img, index) => {
img.style.opacity = index === 0 ? "1" : "0";
img.style.zIndex = index === 0 ? "10" : "1";
});
function showNextImage() {
images[currentImageIndex].style.opacity = "0";
images[currentImageIndex].style.zIndex = "1";
currentImageIndex = (currentImageIndex + 1) % images.length;
images[currentImageIndex].style.opacity = "1";
images[currentImageIndex].style.zIndex = "10";
}