lightbox-gallery

Требования

• Swiper версии ^11.0.0

Подключение и настройка

HTML

<div id="list">
    <a href="/example.jpg">...</a>
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">...</a>
    <a href="https://vkvideo.ru/video-101556650_456239825">...</a>
</div>

Стили

@use '@advdominion/lightbox-gallery/styles.css';

Минимальные настройки

import { gallery } from '@advdominion/lightbox-gallery';

gallery(document.querySelector('#list'), {
    icons: {
        close: `/icons.svg#close`,
    },
});

Все настройки

import { gallery } from '@advdominion/lightbox-gallery';

gallery(document.querySelector('#list'), {
    single: false,
    swiper: {
        speed: duration.effect.s,
        pagination: {
            el: '.swiper-pagination',
        },
        navigation: {
            prevEl: '.swiper-button-prev',
            nextEl: '.swiper-button-next',
        },
    },
    pagination: `
        <div class="swiper-pagination"></div>
    `,
    navigation: `
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    `,
    animation: {
        show: {
            duration: 500,
            easing: 'linear',
        },
        hide: {
            duration: 500,
            easing: 'linear',
        },
    },
    icons: {
        close: `/icons.svg#close`,
    },
});

Одиночный элемент

import { gallery } from '@advdominion/lightbox-gallery';

gallery(document.querySelector('#list > a:first-child'), {
    single: true,
    animation: {
        show: {
            duration: 500,
            easing: 'linear',
        },
        hide: {
            duration: 500,
            easing: 'linear',
        },
    },
    icons: {
        close: `/icons.svg#close`,
    },
});