{{ if isset .Site.Params "carousel" }}
{{ if .Site.Params.carousel.enable }}
{{ if gt (len .Site.Data.carousel) 0 }}
<div id="carouselHome" class="container carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    {{ with index .Site.Data.carousel .Site.Language.Lang }}
    {{ $.Scratch.Set "count" 0 }}
    {{ range sort . "weight" }}
    <button type="button" data-bs-target="#carouselHome" data-bs-slide-to="{{ $.Scratch.Get "count" }}" class="{{ cond (eq ($.Scratch.Get "count") 0) "active" "" }}"></button>
    {{ $.Scratch.Add "count" 1 }}
    {{ end }}
    {{ end }}
  </div>
  <div class="carousel-inner">
    {{ with index .Site.Data.carousel .Site.Language.Lang }}
    {{ range sort . "weight" }}
    <div class="carousel-item {{ .extraclass }}">
      <a href="{{ .url }}"><img src="{{ .image }}" class="img-fluid d-block" style="border-radius: 10px; overflow: hidden"
          alt="{{ .title }}"></a>
      <div class="carousel-caption d-md-block">
        <h4><a style="border-radius: 10px;padding: 5px; color: {{ .textcolor }}; background-color: {{ .backgroundcolor}}" href="{{ .url }}">{{ .title }}</a></h4>
        <p style="border-radius: 10px;padding: 5px; background-color: {{ .backgroundcolor}}" class="d-none d-md-block"><a style="color: {{ .textcolor }};" href="{{ .url }}">{{ .subtitle }}</a></p>
      </div>
    </div>
    {{ end }}
    {{ end }}
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselHome" 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="#carouselHome" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
{{ end }}
{{ end }}
{{ end }}