a post with advanced image components

Created on January 27, 2024

2024   ·   formatting   images   ·   sample-posts

This is an example post with advanced image components.

Image Slider

This is a simple image slider. It uses the Swiper library. Check the examples page for more information of what you can achieve with it.

<img src="/assets/img/9.jpg" class="img-fluid rounded z-depth-1" width="100%" height="auto" loading="eager" onerror=this".onerror=null; $('.responsive-img-srcset').remove();" onContextMenu="return false;" >
<img src="/assets/img/7.jpg" class="img-fluid rounded z-depth-1" width="100%" height="auto" loading="eager" onerror=this".onerror=null; $('.responsive-img-srcset').remove();" onContextMenu="return false;" >
<img src="/assets/img/8.jpg" class="img-fluid rounded z-depth-1" width="100%" height="auto" loading="eager" onerror=this".onerror=null; $('.responsive-img-srcset').remove();" onContextMenu="return false;" >
<img src="/assets/img/10.jpg" class="img-fluid rounded z-depth-1" width="100%" height="auto" loading="eager" onerror=this".onerror=null; $('.responsive-img-srcset').remove();" onContextMenu="return false;" >
<img src="/assets/img/12.jpg" class="img-fluid rounded z-depth-1" width="100%" height="auto" loading="eager" onerror=this".onerror=null; $('.responsive-img-srcset').remove();" onContextMenu="return false;" >

Image Comparison Slider

This is a simple image comparison slider. It uses the img-comparison-slider library. Check the examples page for more information of what you can achieve with it.

<img src="/assets/img/prof_pic.jpg" class="img-fluid rounded z-depth-1" width="100%" height="auto" loading="lazy" onerror=this".onerror=null; $('.responsive-img-srcset').remove();" onContextMenu="return false;" >
<img src="/assets/img/prof_pic_color.png" class="img-fluid rounded z-depth-1" width="100%" height="auto" loading="lazy" onerror=this".onerror=null; $('.responsive-img-srcset').remove();" onContextMenu="return false;" >


Enjoy Reading This Article?

Here are some more articles you might like to read next:

  • Google Gemini updates: Flash 1.5, Gemma 2 and Project Astra
  • Displaying External Posts on Your al-folio Blog
  • a post with plotly.js
  • a post with image galleries
  • a post with tabs