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

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><a href="{{ .Permalink }}"><img src="{{ .Params.banner }}" /></a></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?