74 lines
1.4 KiB
Markdown
74 lines
1.4 KiB
Markdown
|
# 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`,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
```
|