From ffa0ece61873c5ff2b8c855c1d811c10366980ee Mon Sep 17 00:00:00 2001
From: Mircea-Pavel ANTON <contact@mirceanton.com>
Date: Wed, 18 Jan 2023 09:08:49 +0000
Subject: [PATCH] Add dynamically generated ID

---
 layouts/shortcodes/carousel.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html
index 91b333b2..9ce77a46 100644
--- a/layouts/shortcodes/carousel.html
+++ b/layouts/shortcodes/carousel.html
@@ -1,10 +1,13 @@
-<div id="carouselExampleCaptions" class="carousel slide relative" data-bs-ride="carousel">
+{{ $time := now.UnixNano }}
+{{ $id := delimit (slice "gallery" $time) "-" }}
+
+<div id="{{ $id }}" class="carousel slide relative" data-bs-ride="carousel">
     <div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-2">
 
         {{ $num := 0 }}
         {{ range .Params }}
 
-        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{ $num }}" 
+        <button type="button" data-bs-target="#{{ $id }}" data-bs-slide-to="{{ $num }}" 
         {{ if eq $num 0 }} class="active" aria-current="true" {{ end }} aria-label="Slide {{ $num }}"></button>
 
         {{ $num = add $num 1 }}
@@ -25,13 +28,13 @@
     </div>
     <button
         class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
-        type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
+        type="button" data-bs-target="#{{ $id }}" data-bs-slide="prev">
         <span class="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true"></span>
         <span class="visually-hidden">Previous</span>
     </button>
     <button
         class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
-        type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
+        type="button" data-bs-target="#{{ $id }}" data-bs-slide="next">
         <span class="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span>
         <span class="visually-hidden">Next</span>
     </button>