diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index 511e77dc..2b2f2a7a 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -388,4 +388,31 @@ Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your
 {{</* github repo="nunocoracao/blowfish" */>}}
 ```
 
-{{< github repo="nunocoracao/blowfish" >}}
\ No newline at end of file
+{{< github repo="nunocoracao/blowfish" >}}
+
+## Swiper
+
+`swiper` is used to showcase multiple images in a limited space, in an interactive and visually appealing way. It provides a standar swiper/slider/carousel feature, allowing the user to slide through multiple images while only taking up the vertical space of a single one.
+
+<!-- prettier-ignore-start -->
+| Parameter | Description              |
+| --------- | ------------------------ |
+| `id`      | [String] A unique identifier so that multiple sliders can work in the same page |
+| `pattern` | [String] Go glob to match image names |
+<!-- prettier-ignore-end -->
+
+{{< alert "circle-info" >}}
+It doesn't really matter the value set for the slider `id` as long as each slider in a given page has a unique identifier.
+{{< /alert >}}
+<br>
+{{< alert "circle-info" >}}
+A good resource for testing your go glob string is [this url](https://www.digitalocean.com/community/tools/glob?comments=true&glob=img%2F%7Biac%2Ck8s_all%7D.png&matches=false&tests=img%2Fiac.png&tests=img%2Fk8s_all.png)
+{{< /alert >}}
+
+**Example:**
+
+```md
+{{</* slider id="1" pattern="{abstract.jpg,featured.png} */>}}
+```
+
+{{< slider id="1" pattern="{abstract.jpg,featured.png}" >}}
diff --git a/layouts/shortcodes/slider.html b/layouts/shortcodes/slider.html
new file mode 100644
index 00000000..a5631619
--- /dev/null
+++ b/layouts/shortcodes/slider.html
@@ -0,0 +1,46 @@
+{{ $images := .Page.Resources.Match (.Get "pattern") }}
+{{ $id := .Get "id" }}
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
+
+<!-- Slider main container -->
+<div class="swiper swiper{{ $id }}">
+  <!-- Additional required wrapper -->
+  <div class="swiper-wrapper items-center">
+    <!-- Slides -->
+    {{ range $images }}
+    <div class="swiper-slide swiper-slide{{ $id }}">
+    <center>
+      <img src="{{ (.Resize "x300").RelPermalink }}" class="my-0 rounded-md">
+    </center>
+    </div>
+    {{ end }}
+
+  </div>
+  <!-- pagination -->
+  <div class="swiper-pagination swiper-pagination{{ $id }}"></div>
+
+  <!-- navigation buttons -->
+  <div class="swiper-button-prev swiper-button-prev{{ $id }} hover:text-neutral"></div>
+  <div class="swiper-button-next swiper-button-next{{ $id }} hover:text-neutral"></div>
+</div>
+
+<script>
+  new Swiper('.swiper{{ $id }}', {
+    direction: 'horizontal',
+    centeredSlides: true,
+    loop: true,
+    spaceBetween: 10,
+  
+    pagination: {
+      el: '.swiper-pagination{{ $id }}',
+      clickable: true,
+    },
+  
+    navigation: {
+      nextEl: '.swiper-button-next{{ $id }}',
+      prevEl: '.swiper-button-prev{{ $id }}',
+    },
+  });
+</script>
\ No newline at end of file