lightbox-gallery/README.md

74 lines
1.4 KiB
Markdown
Raw Normal View History

2023-06-19 23:14:41 +03:00
# lightbox-gallery
2023-06-19 20:58:52 +03:00
## Требования
- [Swiper](https://github.com/nolimits4web/swiper) версии ^10.2.0
2023-06-19 20:58:52 +03:00
## Подключение и настройка
### HTML
```html
<div id="list">
<a href="/example.jpg">...</a>
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">...</a>
</div>
```
### Стили
```scss
@use '@advdominion/lightbox-gallery/styles.css';
```
### Минимальные настройки
```js
import gallery from '@advdominion/lightbox-gallery';
gallery(document.getElementById('list'), {
icons: {
close: `/icons.svg#close`,
},
});
```
### Все настройки
```js
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`,
},
});
```