diff --git a/_config.yml b/_config.yml
index 838296a529cc..10c8f1102a4f 100644
--- a/_config.yml
+++ b/_config.yml
@@ -394,8 +394,8 @@ mdb:
     css: "sha256-jpjYvU3G3N6nrrBwXJoVEYI/0zw8htfFnhT9ljN3JJw="
     js: "sha256-NdbiivsvWt7VYCt6hYNT3h/th9vSTL4EDWeGs5SN3DA="
 medium_zoom:
-  version: "1.0.8"
-  integrity: "sha256-7PhEpEWEW0XXQ0k6kQrPKwuoIomz8R8IYyuU1Qew4P8="
+  version: "1.1.0"
+  integrity: "sha256-ZgMyDAIYDYGxbcpJcfUnYwNevG/xi9OHKaR/8GK+jWc="
 
 # -----------------------------------------------------------------------------
 # Get external JSON data
diff --git a/_includes/figure.liquid b/_includes/figure.liquid
index 78ce4623602a..9087dd929961 100644
--- a/_includes/figure.liquid
+++ b/_includes/figure.liquid
@@ -1,6 +1,10 @@
 {% assign img_path = include.path | remove: '.jpg' | remove: '.jpeg' | remove: '.png' | remove: '.tiff' | remove: '.gif' %}
 
-<figure>
+<figure
+  {% if include.slot %}
+    slot="{{ include.slot }}"
+  {% endif %}
+>
   <picture>
     <!-- Auto scaling with imagemagick -->
     <!--
diff --git a/_includes/head.liquid b/_includes/head.liquid
index dd242e3271b3..1e5503359cab 100644
--- a/_includes/head.liquid
+++ b/_includes/head.liquid
@@ -71,3 +71,18 @@
     crossorigin=""
   >
 {% endif %}
+
+<!-- Image comparison slider -->
+{% if page.images %}
+  {% if page.images.compare %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8.0/dist/styles.min.css">
+  {% endif %}
+  {% if page.images.slider %}
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css"
+      integrity="sha256-yUoNxsvX+Vo8Trj3lZ/Y5ZBf8HlBFsB6Xwm7rH75/9E="
+      crossorigin="anonymous"
+    >
+  {% endif %}
+{% endif %}
diff --git a/_includes/scripts/imageLayouts.liquid b/_includes/scripts/imageLayouts.liquid
new file mode 100644
index 000000000000..131fcbc198b6
--- /dev/null
+++ b/_includes/scripts/imageLayouts.liquid
@@ -0,0 +1,12 @@
+{% if page.images %}
+  {% if page.images.compare %}
+    <script src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8.0/dist/index.min.js"></script>
+  {% endif %}
+  {% if page.images.slider %}
+    <script
+      src="https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-element-bundle.min.js"
+      integrity="sha256-BPrwikijIybg9OQC5SYFFqhBjERYOn97tCureFgYH1E="
+      crossorigin="anonymous"
+    ></script>
+  {% endif %}
+{% endif %}
diff --git a/_layouts/default.liquid b/_layouts/default.liquid
index f961f0ee4def..7f628e652c33 100644
--- a/_layouts/default.liquid
+++ b/_layouts/default.liquid
@@ -58,5 +58,6 @@
     {% include scripts/analytics.liquid %}
     {% include scripts/progressBar.liquid %}
     {% include scripts/wechatModal.liquid %}
+    {% include scripts/imageLayouts.liquid %}
   </body>
 </html>
diff --git a/_posts/2024-01-27-advanced-images.md b/_posts/2024-01-27-advanced-images.md
new file mode 100644
index 000000000000..eb9beeee017b
--- /dev/null
+++ b/_posts/2024-01-27-advanced-images.md
@@ -0,0 +1,35 @@
+---
+layout: post
+title: a post with advanced image components
+date: 2024-01-27 11:46:00
+description: this is what advanced image components could look like
+tags: formatting images
+categories: sample-posts
+thumbnail: assets/img/9.jpg
+images:
+  compare: true
+  slider: true
+---
+
+This is an example post with advanced image components.
+
+## Image Slider
+
+This is a simple image slider. It uses the [Swiper](https://swiperjs.com/) library. Check the [examples page](https://swiperjs.com/demos) for more information of what you can achieve with it.
+
+<swiper-container keyboard="true" navigation="true" pagination="true" pagination-clickable="true" pagination-dynamic-bullets="true" rewind="true">
+  <swiper-slide>{% include figure.liquid path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid path="assets/img/8.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid path="assets/img/10.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid path="assets/img/12.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+</swiper-container>
+
+## Image Comparison Slider
+
+This is a simple image comparison slider. It uses the [img-comparison-slider](https://img-comparison-slider.sneas.io/) library. Check the [examples page](https://img-comparison-slider.sneas.io/examples.html) for more information of what you can achieve with it.
+
+<img-comparison-slider>
+  {% include figure.liquid path="assets/img/prof_pic.jpg" class="img-fluid rounded z-depth-1" slot="first" %}
+  {% include figure.liquid path="assets/img/prof_pic_color.png" class="img-fluid rounded z-depth-1" slot="second" %}
+</img-comparison-slider>
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 02f8b7d6d057..71a004aa8739 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1091,3 +1091,9 @@ nav[data-toggle="toc"] {
   height: 400px;
   width: 100%;
 }
+
+swiper-container {
+  --swiper-navigation-color: var(--global-theme-color);
+  --swiper-pagination-color: var(--global-theme-color);
+  --swiper-pagination-bullet-inactive-color: var(--global-text-color);
+}
diff --git a/assets/img/prof_pic_color.png b/assets/img/prof_pic_color.png
new file mode 100644
index 000000000000..4a339110a0d8
Binary files /dev/null and b/assets/img/prof_pic_color.png differ