2024-01-27-advanced-images.md

layout	title	date	description	tags	categories	thumbnail	images
post	a post with advanced image components	2024-01-27 03:46:00 -0800	this is what advanced image components could look like	formatting images	sample-posts	assets/img/9.jpg	compare slider true true

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.

{% include figure.liquid loading="eager" path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/8.jpg" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/10.jpg" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/12.jpg" class="img-fluid rounded z-depth-1" %}

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.

{% 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" %}