mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-12 04:23:14 +00:00
45 lines
1.9 KiB
HTML
45 lines
1.9 KiB
HTML
<!--
|
|
Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
|
|
Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
|
|
Visit gethinode.com/license for more details.
|
|
-->
|
|
|
|
{{ $error := false -}}
|
|
|
|
<!-- Validate arguments -->
|
|
{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "carousel" "args" .Params ) }}
|
|
{{ errorf "Invalid arguments: %s" .Position -}}
|
|
{{ $error = true }}
|
|
{{ end }}
|
|
|
|
<!-- Initialize arguments -->
|
|
{{- $id := .Get "id" | default (printf "carousel-%d" .Ordinal) -}}
|
|
{{ $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) -}}
|
|
|
|
<!-- Main code -->
|
|
<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> |