mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-14 05:23:15 +00:00
44 lines
2.1 KiB
HTML
44 lines
2.1 KiB
HTML
<!--
|
|
Displays a carousel of several responsive images (see the image shortcode for more details). Add inner <img>
|
|
elements to define individual image slides. The shortcode supports the following arguments:
|
|
"id": Optional id of the carousel, defaults to "carousel-" with a sequential number.
|
|
"ratio": Optional ratio of the images, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
|
|
Instead, the original aspect ratio of the image is preserved.
|
|
"portrait": Optional flag to adjust the ratio from landscape to portrait. The images themselves are not rotated,
|
|
only the crop area is adjusted.
|
|
"class": Optional class attribute of the carousel element, e.g. “w-75”.
|
|
-->
|
|
|
|
{{- $id := printf "carousel-%d" .Ordinal -}}
|
|
{{ with .Get "id" }}
|
|
{{ $id = . }}
|
|
{{ end }}
|
|
|
|
{{ $class := .Get "class" | default "" -}}
|
|
|
|
{{ $inner := .Scratch.Get "inner" }}
|
|
{{ $input := trim .Inner " \r\n" }}
|
|
{{ if $input }}
|
|
{{ $input = replace $input "\n" "\n " }}
|
|
{{ warnf "Unexpected inner content: %s\r\n %s" .Position $input }}
|
|
{{ end }}
|
|
{{ $items := len (findRE "carousel-item" $inner) -}}
|
|
|
|
<div id="{{ $id }}" class="carousel slide mb-3{{ with $class }} {{ . }}{{ end }}" data-bs-ride="true">
|
|
<div class="carousel-indicators">
|
|
{{ range $index := (seq $items) -}}
|
|
<button type="button" data-bs-target="#carousel-{{ $id }}" data-bs-slide-to="{{ sub $index 1 }}" {{ if eq $index 1 }}class="active"{{ end }} aria-current="true" aria-label="Slide {{ $index }}"></button>
|
|
{{ end -}}
|
|
</div>
|
|
<div class="carousel-inner">
|
|
{{ $inner | safeHTML }}
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#{{ $id }}" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#{{ $id }}" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div> |