74 lines
1.4 KiB
Markdown
74 lines
1.4 KiB
Markdown
# lightbox-gallery
|
||
|
||
## Требования
|
||
|
||
- [Swiper](https://github.com/nolimits4web/swiper) версии 4.5.x
|
||
|
||
## Подключение и настройка
|
||
|
||
### 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`,
|
||
},
|
||
});
|
||
```
|