1 files changed, 74 insertions, 0 deletions
diff --git a/themes/blowfish/layouts/shortcodes/carousel.html b/themes/blowfish/layouts/shortcodes/carousel.html
new file mode 100644
index 0000000..8cc82d1
--- /dev/null
+++ b/themes/blowfish/layouts/shortcodes/carousel.html
@@ -0,0 +1,74 @@
+{{ $id := delimit (slice "carousel" (partial "functions/uid.html" .)) "-" }}
+{{ $aspect := default "16-9" (.Get "aspectRatio") }}
+{{ $interval := default "2000" (.Get "interval") }}
+
+{{ $page := .Page.Resources }}
+{{ $imagesTemp := .Get "images" }}
+{{ $imagesTemp = strings.TrimPrefix "{" $imagesTemp  }}
+{{ $imagesTemp = strings.TrimSuffix "}" $imagesTemp  }}
+{{ $imagesTemp := strings.Split $imagesTemp "," }}
+{{ $images := slice}}
+{{ range $imagesTemp }}
+    {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
+        {{ $images = $images | append (resources.GetRemote .) }}
+    {{ else }}
+        {{ $images = $images | append ($page.Match .) }}
+    {{ end }}
+{{ end }}
+
+<div id="{{ $id }}" class="relative" data-twe-carousel-init data-twe-ride="carousel">
+    <div class="absolute right-0 bottom-0 left-0 z-[2] mx-[15%] mb-10 flex list-none justify-center p-0"
+        data-twe-carousel-indicators>
+
+        {{ $num := 0 }}
+        {{ range $images }}
+
+        <button type="button" data-twe-target="#{{ $id }}" data-twe-slide-to="{{ $num }}" {{ if eq $num 0 }} data-twe-carousel-active aria-current="true" {{ end }} 
+        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="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
+
+        {{ $num := 0 }}
+        {{ range $images }}
+
+        <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"
+            data-twe-carousel-item {{ if eq $num 0 }} data-twe-carousel-active {{ end }}>
+            <div class="ratio-{{ $aspect }} single_hero_background">
+                <img src="{{ .RelPermalink }}" class="block absolute top-0 object-cover w-full h-full nozoom" alt="carousel image {{$num}}"/>
+            </div>
+        </div>
+
+        {{ $num = add $num 1 }}
+        {{ end }}
+
+    </div>
+    <button
+        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-twe-target="#{{ $id }}" data-twe-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="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-twe-target="#{{ $id }}" data-twe-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="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>