How to make a Carousel out of Go/Hugo Iteration Markup - carousel

Question

I'm creating a Go/Hugo Theme with Bootstrap 4 and in my index.html template file I have the code below to iterate through the articles posted:
<div class="col-12 col-md-12" id="main">
<div class="row">
{{- range .Paginator.Pages -}}
{{- if eq .Type "posts"}}
<div class="col-12 col-md-3 col-lg-3">
<figure><img src="{{ .Params.banner }}" /></figure>
<p>{{ .Summary }}</p>
</div>
{{- end -}}
{{- end }}
</div>
</div>
It's not quite ready yet but it already allows me to use a cover image, defined as a FrontMatter parameter, for something more creative than a blog-like style. Here, a sneak-peak.
As you can see there as Pagination implemented as well so I can see whatever is older the the last entries (defined in config.toml and accessed through .Paginator.Pages).
But I was thinking on get rid of this Pagination and transform this listing in a Carousel, but I don't if I would be able to do so with Hugo nor if it's possible to "plug n' play" a Carousel that would working with Bootstrap's existing markup.
How could I accomplish that?

Answer 1

If you can do it in HTML then you can do it with Hugo, so the answer is yes, it's possible. From a brief search on the net there seem to be dozens of carousel implementations for Bootstrap, so just choose one of those.
For example, with the carousel for Bootstrap v4 alpha on the Bootstrap site, you can make a carousel with this code:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Third slide">
</div>
</div>
</div>
Assuming that you have defined the parameters carouselimage and carouselimagealt in the front matter of all your articles, you could generate this HTML with Hugo by doing this:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
{{ $paginator := .Paginate (where .Data.Pages "Type" "posts") }}
{{ range $paginator.Pages }}
<div class="carousel-item active">
<img class="d-block img-fluid" src="{{ .Data.carouselimage }}" alt="{{ .Data.carouselimagealt }}">
</div>
{{ end }}
</div>
</div>
Also, I've made your page type here "posts" as you did in your question, but usually in Hugo it is "post", so you might want to check which one you need.