How to get swiper working

[JB515]

The example post 2024-01-27-advanced-images.md has a really cool image gallery built with swiper. I copied the example and added my own images, but when I push it and run the deploy action, the page shows all the images one after the other as if I hand't added the swiper-container tags. I've pasted my code snippet below:

<swiper-container keyboard="true" navigation="true" pagination="true" pagination-clickable="true" pagination-dynamic-bullets="true" rewind="true">
    <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/projects/hrx/v1.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
    <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/projects/hrx/cnc-1.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
    <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/projects/hrx/batch-1.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
    <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/projects/hrx/frames-1.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
    <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/projects/hrx/boilerplate.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
    <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/projects/hrx/demo.jpeg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
    <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/projects/hrx/mint.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
</swiper-container>

Is there any other setup I should be doing to use Swiper here?

[george-gca]

Usually in these posts there are some flags that must be enabled in the page front matter. In your case:

images:
  slider: true

[JB515]

Yes, exactly that. Thank you!