lightbox-gallery/README.md

# lightbox-gallery

## Требования

- [Swiper](https://github.com/nolimits4web/swiper) версии ^11.0.0

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

### HTML

```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>
```

### Стили

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

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

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

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

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

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

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

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