| layout | post | ||||
|---|---|---|---|---|---|
| title | a post with advanced image components | ||||
| date | 2024-01-27 03:46:00 -0800 | ||||
| description | this is what advanced image components could look like | ||||
| tags | formatting images | ||||
| categories | sample-posts | ||||
| thumbnail | assets/img/9.jpg | ||||
| images |
|
This is an example post with advanced image components.
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" %}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" %}