updated carousel shorcode to support latest version of tw-elements

assets/css/compiled/main.css

@@ -1275,6 +1275,10 @@ select {
   position: fixed;
 }
 
+.\!absolute {
+  position: absolute !important;
+}
+
 .absolute {
   position: absolute;
 }
@@ -1443,6 +1447,10 @@ select {
   z-index: 1;
 }
 
+.z-\[2\] {
+  z-index: 2;
+}
+
 .z-\[999\] {
   z-index: 999;
 }
@@ -1459,6 +1467,10 @@ select {
   float: left;
 }
 
+.\!-m-px {
+  margin: -1px !important;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -1495,6 +1507,16 @@ select {
   margin-right: 0.25rem;
 }
 
+.mx-\[15\%\] {
+  margin-left: 15%;
+  margin-right: 15%;
+}
+
+.mx-\[3px\] {
+  margin-left: 3px;
+  margin-right: 3px;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1543,6 +1565,10 @@ select {
   margin-right: -12rem;
 }
 
+.-mr-\[100\%\] {
+  margin-right: -100%;
+}
+
 .-mt-3 {
   margin-top: -0.75rem;
 }
@@ -1747,6 +1773,10 @@ select {
   height: 0px !important;
 }
 
+.\!h-px {
+  height: 1px !important;
+}
+
 .h-0 {
   height: 0px;
 }
@@ -1855,6 +1885,10 @@ select {
   height: 32px;
 }
 
+.h-\[3px\] {
+  height: 3px;
+}
+
 .h-\[40px\] {
   height: 40px;
 }
@@ -1931,6 +1965,10 @@ select {
   min-height: auto;
 }
 
+.\!w-px {
+  width: 1px !important;
+}
+
 .w-0 {
   width: 0px;
 }
@@ -2160,6 +2198,10 @@ select {
   flex: 1 1 auto;
 }
 
+.flex-initial {
+  flex: 0 1 auto;
+}
+
 .flex-none {
   flex: none;
 }
@@ -2493,6 +2535,10 @@ select {
   overflow: auto;
 }
 
+.\!overflow-hidden {
+  overflow: hidden !important;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -2523,6 +2569,10 @@ select {
   white-space: normal;
 }
 
+.\!whitespace-nowrap {
+  white-space: nowrap !important;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -2617,6 +2667,10 @@ select {
   border-top-right-radius: 0.5rem;
 }
 
+.\!border-0 {
+  border-width: 0px !important;
+}
+
 .\!border-\[3px\] {
   border-width: 3px !important;
 }
@@ -2641,6 +2695,11 @@ select {
   border-width: 14px;
 }
 
+.border-y-\[10px\] {
+  border-top-width: 10px;
+  border-bottom-width: 10px;
+}
+
 .border-b-2 {
   border-bottom-width: 2px;
 }
@@ -2907,6 +2966,10 @@ select {
      object-position: left;
 }
 
+.\!p-0 {
+  padding: 0px !important;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -3172,6 +3235,10 @@ select {
   text-align: right;
 }
 
+.-indent-\[999px\] {
+  text-indent: -999px;
+}
+
 .align-top {
   vertical-align: top;
 }
@@ -3706,6 +3773,12 @@ select {
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .delay-\[0ms\] {
   transition-delay: 0ms;
 }
@@ -3734,6 +3807,10 @@ select {
   transition-duration: 400ms;
 }
 
+.duration-\[600ms\] {
+  transition-duration: 600ms;
+}
+
 .ease-\[cubic-bezier\(0\2c 0\2c 0\.15\2c 1\)\2c _cubic-bezier\(0\2c 0\2c 0\.15\2c 1\)\] {
   transition-timing-function: cubic-bezier(0,0,0.15,1), cubic-bezier(0,0,0.15,1);
 }
@@ -3766,6 +3843,10 @@ select {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+.\!\[clip\:rect\(0\2c 0\2c 0\2c 0\)\] {
+  clip: rect(0,0,0,0) !important;
+}
+
 .\[direction\:ltr\] {
   direction: ltr;
 }
@@ -5394,6 +5475,21 @@ body:has(#menu-controller:checked) {
   background-color: transparent;
 }
 
+.after\:clear-both::after {
+  content: var(--tw-content);
+  clear: both;
+}
+
+.after\:block::after {
+  content: var(--tw-content);
+  display: block;
+}
+
+.after\:content-\[\'\'\]::after {
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
 .first\:mt-8:first-child {
   margin-top: 2rem;
 }

layouts/shortcodes/carousel.html

@@ -4,48 +4,59 @@
 {{ $images := .Page.Resources.Match (.Get "images") }}
 {{ $interval := default "2000" (.Get "interval") }}
 
-<div id="{{ $id }}" class="carousel slide relative" data-bs-ride="carousel">
+<div id="{{ $id }}" class="relative" data-te-carousel-init data-te-carousel-slide>
-    <div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-2">
+    <div class="absolute right-0 bottom-0 left-0 z-[2] mx-[15%] mb-10 flex list-none justify-center p-0"
+        data-te-carousel-indicators>
 
         {{ $num := 0 }}
         {{ range $images }}
 
-        <button type="button" data-bs-target="#{{ $id }}" data-bs-slide-to="{{ $num }}" {{ if eq $num 0 }}
+        <button type="button" data-te-target="#{{ $id }}" data-te-slide-to="{{ $num }}" {{ if eq $num 0 }} data-te-carousel-active aria-current="true" {{ end }} 
-            class="active" aria-current="true" {{ end }} aria-label="Slide {{ $num }}"></button>
+        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        aria-label="Slide {{ $num }}"></button>
 
         {{ $num = add $num 1 }}
         {{ end }}
 
     </div>
-    <div class="carousel-inner relative w-full overflow-hidden">
+    <div class="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
 
         {{ $num := 0 }}
         {{ range $images }}
 
-        <div class="carousel-item {{ if eq $num 0 }} active {{ end }} relative float-left w-full ratio-{{ $aspect }} single_hero_background"
+        <div class="relative float-left -mr-[100%] {{ if not (eq $num 0) }} hidden {{ end }} w-full transition-transform duration-[{{ $interval }}ms] ease-in-out motion-reduce:transition-none"
-            style="background-image:url({{ . }})" data-bs-interval="{{ $interval }}"></div>
+            data-te-carousel-item {{ if eq $num 0 }} data-te-carousel-active {{ end }}>
+            <div class="ratio-{{ $aspect }} single_hero_background">
+                <img src="{{ . }}" class="block absolute top-0 object-cover w-full h-full nozoom" />
+            </div>
+        </div>
+
         {{ $num = add $num 1 }}
         {{ end }}
 
     </div>
     <button
-        class="absolute top-0 bottom-0 left-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+        class="absolute top-0 bottom-0 left-0 z-[2] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
         type="button" data-te-target="#{{ $id }}" data-te-slide="prev">
         <span class="inline-block h-8 w-8">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4.5"
                 stroke="currentColor" class="h-6 w-6">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
             </svg>
         </span>
+        <span
+            class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
     </button>
     <button
         class="absolute top-0 bottom-0 right-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
         type="button" data-te-target="#{{ $id }}" data-te-slide="next">
         <span class="inline-block h-8 w-8">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4.5"
                 stroke="currentColor" class="h-6 w-6">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
             </svg>
         </span>
+        <span
+            class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Nextsads</span>
     </button>
 </div>