qia-image-gallery: Had the First Working Version

• UUID: 414fe31a-8adb-46ae-8944-52f1ae8754d9

With slider, thumbnails and buttons for navigation

As of 20231127, qia-image-gallery as part of qia.js has been adopted by JH-Blog and JH-Articles.

qia-image-gallery exposes APIs as web components, therefore it can be used as an HTML document custom element.

<qia-image-gallery>
    <img>
    <img>
</qia-image-gallery>
<qia-image-gallery>
    <qia-image></qia-image>
    <qia-image></qia-image>
</qia-image-gallery>
<qia-image-gallery>
    <img>
    <qia-image></qia-image>
    <qia-gif></qia-gif>
</qia-image-gallery>

As shown in the above gif, supported features include

• touch or mouse swipe to navigate to previous or next slide
• thumbnails as navigation
• buttons to navigate to previous or next slide
• dark scheme
• thumbnail container with a scroll bar for quick navigation

Design preferences

• horizontally and vertically algin images shown in slides as well as in thumbnails
• thumbnails with fixed height 150px and max width 75% of the thumbnail container client width