header image: support image carousel HugoBlox#399

Enable to show multiple images in the header image of a page. The
implementation uses Bootstrap, which is already included. The images,
captions, additional indicator CSS class for styling, and interval
time are configurable. Example YAML style in document header:
---
header:
  carousel:
    interval: 5000
    indicator_cssclass: carousel-indicators-botleft
    items:
    - image: header_image_1.jpg
      caption: "Caption 1"
    - image: header_image_2.jpg
      caption: "Caption 2"
---

layouts/partials/header_image.html

@@ -3,4 +3,23 @@
   <img src="{{ "/img/" | relURL }}{{ .Params.header.image }}" class="article-banner" itemprop="image">
   {{ with .Params.header.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
 </div>
-{{end}}
+{{ else if .Params.header.carousel }}
+<div id="article-header-carousel" class="carousel slide" data-ride="carousel" data-interval="{{ index .Params.header.carousel "interval" | default "5000" }}">
+  <!-- Indicators -->
+  <ol class="carousel-indicators carousel-indicators-botleft">
+{{   range $index, $item := .Params.header.carousel.items }}
+    <li data-target="#article-header-carousel" data-slide-to="{{ $index }}" {{ if eq $index 0 }} class="active"{{ end}}></li>
+{{   end }}
+  </ol>
+
+  <!-- Wrapper for slides -->
+  <div class="carousel-inner">
+{{   range $index, $item := .Params.header.carousel.items }}
+    <div class="item{{ if eq $index 0 }} active{{ end }}">
+      <img src="{{ "/img/" | relURL }}{{ $item.image }}" alt="{{ with $item.caption }}{{ . | markdownify | emojify }}{{ end }}">
+      {{ with  $item.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
+    </div>
+{{   end }}
+  </div>
+</div>
+{{ end }}