Go to file
Valentin Silytuin ba5307fc1e Обновление Swiper до 10-й версии 2023-08-28 13:07:44 +04:00
.yarn Yarn Plug'n'Play 2023-08-28 13:06:18 +04:00
.editorconfig v1.0.0 2023-06-19 21:58:52 +04:00
.gitignore Yarn Plug'n'Play 2023-08-28 13:06:18 +04:00
.npmignore Yarn Plug'n'Play 2023-08-28 13:06:18 +04:00
.prettierrc v1.0.0 2023-06-19 21:58:52 +04:00
.yarnrc.yml Yarn Plug'n'Play 2023-08-28 13:06:18 +04:00
README.md Обновление Swiper до 10-й версии 2023-08-28 13:07:44 +04:00
index.js Обновление Swiper до 10-й версии 2023-08-28 13:07:44 +04:00
package.json Обновление Swiper до 10-й версии 2023-08-28 13:07:44 +04:00
styles.css v1.0.0 2023-06-19 21:58:52 +04:00
yarn.lock Yarn Plug'n'Play 2023-08-28 13:06:18 +04:00

README.md

lightbox-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`,
    },
});