How to set up Stimulus Carousel on Rails 7?

Question

I'm a Ruby on Rails newbie trying to use the Stimulus Component "Stimulus Carousel" on a Rails 7 app to have images of a flat displayed as a carousel.

Following the set up instructions from the official documentation triggered issues like the one mentioned on this other question about using Stimulus Components with Importmaps, so I tried adapting the answer to my problem by doing this:

./bin/importmap pin stimulus-carousel

This pinned the following in importmap.rb :

pin "stimulus-carousel", to: "https://ga.jspm.io/npm:stimulus-carousel@4.0.0/dist/stimulus-carousel.es.js"
pin "dom7", to: "https://ga.jspm.io/npm:dom7@4.0.4/dom7.esm.js"
pin "ssr-window", to: "https://ga.jspm.io/npm:ssr-window@4.0.2/ssr-window.esm.js"
pin "swiper/bundle", to: "https://ga.jspm.io/npm:swiper@7.4.1/swiper-bundle.esm.js"

I also generated the Stimulus controller:

rails g stimulus carousel

And wrote this in app/javascript/controllers/carousel_controller.js:

import { Controller } from "@hotwired/stimulus";
import { Application } from "@hotwired/stimulus";
import Carousel from "stimulus-carousel";

const application = Application.start();
application.register("carousel", Carousel);

// Connects to data-controller="carousel"
export default class extends Controller {
  connect() {
    super.connect();
    console.log('Do what you want here.');

    // The swiper instance.
    this.swiper;

    // Default options for every carousels.
    this.defaultOptions;
  }
}

I could check the stimulus controller was connected, but nothing changed visually on the flats#show page, the first image was still on top of the second. So I looked into Swiper documentation and added this line in the head of app/views/layouts/application.html.erb:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>

Now, this did change the visual of the page: I've got the second picture far to the right of the first picture now, but this still isn't a carousel. I have tried adding this in the head too, but it didn't change anything:

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

Could someone please let me know how I should set this up for the carousel to display properly?

Here is what I have on the flats#show page in case it helps:

<div data-controller="carousel" class="swiper-container">
    <div class="swiper-wrapper">
      <% @flat.photos.each do |photo| %>
        <div class="swiper-slide">
          <%= cl_image_tag photo.key, class: "flat-image-show" %>
        </div>
      <% end %>
    </div>
  </div>

Thanks in advance!