Carousel image gallery with lightbox

HTML

<div id="inline-gallery-container" class="inline-gallery-container"></div>

JavaScript

const lgContainer = document.getElementById('inline-gallery-container');
const inlineGallery = lightGallery(lgContainer, {
    container: lgContainer,
    dynamic: true,
    // Turn off hash plugin in case if you are using it
    // as we don't want to change the url on slide change
    hash: false,
    // Do not allow users to close the gallery
    closable: false,
    // Add maximize icon to enlarge the gallery
    showMaximizeIcon: true,
    // Append caption inside the slide item
    // to apply some animation for the captions (Optional)
    appendSubHtmlTo: '.lg-item',
    // Delay slide transition to complete captions animations
    // before navigating to different slides (Optional)
    // You can find caption animation demo on the captions demo page
    slideDelay: 400,
    dynamicEl: [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            subHtml: `<div class="lightGallery-captions">
                <h4>Caption 1</h4>
                <p>Description of the slide 1</p>
            </div>`,
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            subHtml: `<div class="lightGallery-captions">
                <h4>Caption 2</h4>
                <p>Description of the slide 2</p>
            </div>`,
        },
        // more items
    ],
});

// Since we are using dynamic mode, we need to programmatically open lightGallery
inlineGallery.openGallery();

import { useState } from 'react';
import { LightGallery } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Zoom from '@lightgallery/react/plugins/zoom';

const slides = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        captionHtml: '<h4>Caption 1</h4><p>Description of the slide 1</p>',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        captionHtml: '<h4>Caption 2</h4><p>Description of the slide 2</p>',
    },
];

// An inline gallery is the same component mounted into your own
// element: keep it open and non-closable, and it behaves as a carousel.
// The element is kept in state, not in a ref: the gallery can only be
// rendered into it once it exists, and setting state renders again.
const [container, setContainer] = useState<HTMLElement | null>(null);

<>
    {/* The gallery is rendered inside this element and takes its size. */}
    <div className="inline-gallery-container" ref={setContainer} />
    {container && (
        <LightGallery
            container={container}
            // The carousel is always open and cannot be closed.
            open
            closable={false}
            // Toolbar button that expands it to the whole window.
            showMaximizeIcon
            slides={slides}
            plugins={[Thumbnail, Zoom]}
        />
    )}
</>;

<script setup>
import { ref } from 'vue';
import { LightGallery } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Zoom from '@lightgallery/vue/plugins/zoom';

const plugins = [Thumbnail, Zoom];
const slides = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        captionHtml: '<h4>Caption 1</h4><p>Description of the slide 1</p>',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        captionHtml: '<h4>Caption 2</h4><p>Description of the slide 2</p>',
    },
];

// An inline gallery is the same component mounted into your own
// element: keep it open and non-closable, and it behaves as a carousel.
const container = ref(null);
</script>

<template>
    <!-- The gallery is rendered inside this element and takes its size. -->
    <div ref="container" class="inline-gallery-container" />
    <!-- The carousel cannot be closed. The maximize icon expands it to the
         whole window. -->
    <LightGallery
        v-if="container"
        :container="container"
        :open="true"
        :closable="false"
        :show-maximize-icon="true"
        :slides="slides"
        :plugins="plugins"
    />
</template>

import { Component } from '@angular/core';
import { LgGalleryComponent, type LgGalleryItem } from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withZoom } from '@lightgallery/angular/plugins/zoom';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent],
    template: `
        <!-- The gallery is rendered inside this element and takes its
             size. -->
        <div #host class="inline-gallery-container"></div>
        <!-- The carousel is always open and cannot be closed. The maximize
             icon expands it to the whole window. -->
        <lg-gallery
            [container]="host"
            [open]="true"
            [closable]="false"
            [showMaximizeIcon]="true"
            [slides]="slides"
            [features]="features"
        />
    `,
})
export class Gallery {
    features = [withThumbnail(), withZoom()];

    slides: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Mountains',
            captionHtml: '<h4>Caption 1</h4><p>Description of the slide 1</p>',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Forest path',
            captionHtml: '<h4>Caption 2</h4><p>Description of the slide 2</p>',
        },
    ];
}