Demos

Update slides

View as Markdown Open in Claude Open in ChatGPT

lightGallery supports adding, editing, deleting slides even if the gallery is opened. You just need to modify the current gallery items and pass it via updateSlides method.

Let’s see how we can add and delete slides dynamically.

The demo adds two buttons to the gallery toolbar and calls updateSlides() from them.

First, add the delete and add buttons to the toolbar.

Open in StackBlitz
Open in StackBlitz
Open in StackBlitz
Open in StackBlitz

HTML

<div id="gallery-update-slides-demo">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>

JavaScript

const gallery = document.getElementById('gallery-update-slides-demo');

// lgInit fires once the gallery markup exists: add the buttons there.
gallery.addEventListener('lgInit', (event) => {
    const toolbar = event.detail.instance.outer.get().querySelector('.lg-toolbar');
    toolbar.insertAdjacentHTML(
        'beforeend',
        '<button type="button" aria-label="Remove slide" class="lg-icon" id="lg-delete"><svg>...</svg></button>' +
            '<button type="button" aria-label="Add slide" class="lg-icon" id="lg-add"><svg>...</svg></button>',
    );
    toolbar.querySelector('#lg-delete').addEventListener('click', removeFirstSlide);
    toolbar.querySelector('#lg-add').addEventListener('click', addSlide);
});

const lg = lightGallery(gallery, {
    addClass: 'lg-update-slide-demo',
});
import { useState } from 'react';
import {
    LightGallery,
    LightGalleryItem,
    type GalleryItem,
} from '@lightgallery/react';

const firstItems: GalleryItem[] = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

export default function Gallery() {
    // Rendering a different list is the update, also while the gallery is
    // open: there is no updateSlides() to call.
    const [items, setItems] = useState(firstItems);

    // removeFirstSlide and addSlide: the next two steps.

    return (
        // There is no toolbar to append to; `render.caption` puts the
        // buttons in the caption area of every slide instead.
        <LightGallery
            render={{
                caption: () => (
                    <div className="slide-actions">
                        <button type="button" onClick={removeFirstSlide}>
                            Remove slide
                        </button>
                        <button type="button" onClick={addSlide}>
                            Add slide
                        </button>
                    </div>
                ),
            }}
        >
            {items.map((item) => (
                <LightGalleryItem key={item.src} item={item}>
                    <img src={item.thumb} alt={item.alt} />
                </LightGalleryItem>
            ))}
        </LightGallery>
    );
}
<script setup>
import { ref } from 'vue';
import { LightGallery, LgItem } from '@lightgallery/vue';

// Changing the list is the update, also while the gallery is open: there
// is no updateSlides() to call.
const items = ref([
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
]);

// removeFirstSlide and addSlide: the next two steps.
</script>

<template>
    <LightGallery>
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>

        <!-- There is no toolbar to append to; the caption slot puts the
             buttons in the caption area of every slide instead. -->
        <template #caption>
            <div class="slide-actions">
                <button type="button" @click="removeFirstSlide">
                    Remove slide
                </button>
                <button type="button" @click="addSlide">Add slide</button>
            </div>
        </template>
    </LightGallery>
</template>
import { Component, signal } from '@angular/core';
import {
    LgCaptionDirective,
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';

const firstItems: LgGalleryItem[] = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

@Component({
    selector: 'app-gallery',
    imports: [LgCaptionDirective, LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery>
            @for (item of items(); track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }

            <!-- There is no toolbar to append to; the lgCaption template
                 puts the buttons in the caption area of every slide. -->
            <ng-template lgCaption>
                <div class="slide-actions">
                    <button type="button" (click)="removeFirstSlide()">
                        Remove slide
                    </button>
                    <button type="button" (click)="addSlide()">Add slide</button>
                </div>
            </ng-template>
        </lg-gallery>
    `,
})
export class Gallery {
    // Updating the signal is the update, also while the gallery is open:
    // there is no updateSlides() to call.
    items = signal(firstItems);

    // removeFirstSlide() and addSlide(): the next two steps.
}

Delete the first slide when the delete button is clicked.

Note:

  • Do not mutate the existing gallery items directly; always pass a new list.
  • Thumbnails outside the gallery are yours to update. Call refresh() after changing them, as in the infinite scrolling demo.
function removeFirstSlide() {
    const galleryItems = lg.galleryItems.slice(1);

    // The second argument is the slide to show after the update:
    // stay on the one being viewed.
    lg.updateSlides(galleryItems, Math.max(lg.index - 1, 0));
}
// There is no updateSlides(): a new array is the update. The gallery
// keeps its index.
const removeFirstSlide = () => setItems((current) => current.slice(1));
// There is no updateSlides(): a new array is the update. The gallery
// keeps its index.
const removeFirstSlide = () => {
    items.value = items.value.slice(1);
};
// There is no updateSlides(): a new array is the update. The gallery
// keeps its index.
removeFirstSlide() {
    this.items.update((current) => current.slice(1));
}

Add a new slide when the add button is clicked.

function addSlide() {
    const galleryItems = [
        ...lg.galleryItems,
        { src: 'img/img3.jpg', thumb: 'img/thumb3.jpg' },
    ];

    // Keep the current slide.
    lg.updateSlides(galleryItems, lg.index);
}
const addSlide = () =>
    setItems((current) => [
        ...current,
        { src: 'img/img3.jpg', thumb: 'img/thumb3.jpg', alt: 'Lake' },
    ]);
const addSlide = () => {
    items.value = [
        ...items.value,
        { src: 'img/img3.jpg', thumb: 'img/thumb3.jpg', alt: 'Lake' },
    ];
};
addSlide() {
    this.items.update((current) => [
        ...current,
        { src: 'img/img3.jpg', thumb: 'img/thumb3.jpg', alt: 'Lake' },
    ]);
}
SCSS (Optional)
.lg-update-slide-demo {
    .lg-toolbar {
        .lg-icon {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        svg {
            fill: #999;
            width: 22px;
            height: 22px;
        }
    }
}

Demo

Edit this page on GitHub