rewrote carousel

layouts/partials/vendor.html

@@ -47,9 +47,14 @@
 <script defer src="{{ $typeitLib.RelPermalink }}" integrity="{{ $typeitLib.Data.Integrity }}"></script>
 {{ end }}
 
-
 {{/* Packery */}}
 {{ if .Page.HasShortcode "gallery" }}
 {{ $packeryLib := resources.Get "lib/packery/packery.pkgd.min.js" }}
 <script defer src="{{ $packeryLib.RelPermalink }}" integrity="{{ $packeryLib.Data.Integrity }}"></script>
+{{ end }}
+
+{{/* tw-elements */}}
+{{ if .Page.HasShortcode "carousel" }}
+{{ $twelementsLib := resources.Get "lib/tw-elements/index.min.js" }}
+<script defer src="{{ $twelementsLib.RelPermalink }}" integrity="{{ $twelementsLib.Data.Integrity }}"></script>
 {{ end }}

layouts/shortcodes/carousel.html

@@ -0,0 +1,38 @@
+<div id="carouselExampleCaptions" 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 }}" 
+        {{ if eq $num 0 }} class="active" aria-current="true" {{ end }} aria-label="Slide {{ $num }}"></button>
+
+        {{ $num = add $num 1 }}
+        {{ end }}
+
+    </div>
+    <div class="carousel-inner relative w-full overflow-hidden">
+
+        {{ $num := 0 }}
+        {{ range .Params }}
+
+        <div class="carousel-item {{ if eq $num 0 }} active {{ end }} relative float-left w-full ratio-16-9 single_hero_background"
+            style="background-image:url({{ . }})"
+        ></div>
+        {{ $num = add $num 1 }}
+        {{ end }}
+
+    </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">
+        <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">
+        <span class="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span>
+        <span class="visually-hidden">Next</span>
+    </button>
+</div>