Go to file
Valentin Silytuin 3a584bc70e v1.0.0 2023-06-19 21:58:52 +04:00
.yarn v1.0.0 2023-06-19 21:58:52 +04:00
.editorconfig v1.0.0 2023-06-19 21:58:52 +04:00
.gitignore v1.0.0 2023-06-19 21:58:52 +04:00
.npmignore v1.0.0 2023-06-19 21:58:52 +04:00
.prettierrc v1.0.0 2023-06-19 21:58:52 +04:00
.yarnrc.yml v1.0.0 2023-06-19 21:58:52 +04:00
README.md v1.0.0 2023-06-19 21:58:52 +04:00
index.js v1.0.0 2023-06-19 21:58:52 +04:00
package.json v1.0.0 2023-06-19 21:58:52 +04:00
styles.css v1.0.0 2023-06-19 21:58:52 +04:00
yarn.lock v1.0.0 2023-06-19 21:58:52 +04:00

README.md

gallery

Требования

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

HTML

<div id="list">
    <a href="/example.jpg">...</a>
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">...</a>
</div>

Стили

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

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

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

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

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

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

gallery(document.getElementById('list'), {
    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`,
    },
});