Lightgallery

Two lightGallery 2.x views are included: an inline carousel and simple thumbnails.

lightGallery is distributed under GPLv3; commercial sites need a licence. The key goes into licenseKey in the chunks.

Including the library

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/css/lightgallery-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/lightgallery.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/thumbnail/lg-thumbnail.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/zoom/lg-zoom.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/fullscreen/lg-fullscreen.umd.min.js"></script>

Include the scripts before the snippet call or in <head>: the chunks start the gallery on DOMContentLoaded.

Carousel

A large image with arrows and a thumbnail strip right on the page (zoom and thumbnail plugins).

[[!Gallery3x?
    &tplOuter=`tpl.Gallery3x.carousel.outer`
    &tplThumb=`tpl.Gallery3x.carousel.item`
]]

• The slide uses the big size, the strip — small; the caption is the image title and description.
• The container has a fixed id="inline-gallery-container": one such carousel per page. For several, copy the chunk and change the id.
• Carousel size and proportions are in the styles at the top of the tpl.Gallery3x.carousel.outer chunk.

Simple thumbnails

small thumbnails; a click opens big in a viewer (thumbnail, zoom, fullscreen plugins).

[[!Gallery3x?
    &tplOuter=`tpl.Gallery3x.static_thumbnails.outer`
    &tplThumb=`tpl.Gallery3x.static_thumbnails`
]]

The container is id="static-thumbnails", also one per page.

Live examples are on the demo site demog3x.ivan345.com.