swiper gallery
Boris Voropaev
parent
e020b039d3
commit
f327b6ee8b
|
|
@ -8,72 +8,14 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div *ngIf="imageType==='carousel'" id="section-{{section.id}}" class="carousel">
|
||||
<div class="prev">
|
||||
<img src="/assets/images/icons/left_50.svg"/>
|
||||
</div>
|
||||
<div class="center">
|
||||
<swiper [config]="config">
|
||||
<ng-template ngFor let-item [ngForOf]="items">
|
||||
<ng-template swiperSlide>
|
||||
<div class="slide">
|
||||
<img [src]="item?.links?.full"/>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</swiper>
|
||||
</div>
|
||||
|
||||
<div class="next">
|
||||
<img src="/assets/images/icons/right_50.svg"/>
|
||||
<div *ngIf="imageType==='carousel'" id="section-{{section.id}}" class="carousel">
|
||||
<div class="swiper-box">
|
||||
<swiper-gallery [items]="items"></swiper-gallery>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div *ngIf="showFullscreen" class="fullscreen desctop">
|
||||
|
||||
<div class="content center">
|
||||
<img [src]="photo"/>
|
||||
</div>
|
||||
<div class="content between">
|
||||
<div class="close" (click)="showFullscreen = false">
|
||||
<img src="/assets/images/icons/close_50.svg"/>
|
||||
|
||||
</div>
|
||||
<div *ngIf="items.length > 1" class="left" (click)="go('decrement')">
|
||||
<img *ngIf="backId!==''" src="/assets/images/icons/left_50.svg"/>
|
||||
</div>
|
||||
<div *ngIf="items.length > 1" class="right" (click)="go('increment')">
|
||||
<img *ngIf="nextId!==''" src="/assets/images/icons/right_50.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content center bottom">
|
||||
<div class="thumbnails" *ngFor="let item of items; let i = index">
|
||||
<img [src]="item.links?.full" (click)="show(i)"/>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showFullscreen" class="fullscreen">
|
||||
<swiper-gallery [items]="items" [start]="activeIndex" (event)="showFullscreen=false" [closing]="true"></swiper-gallery>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="showFullscreen" class="fullscreen mobile" id="section-{{section.id}}" >
|
||||
<div class="close" (click)="showFullscreen = false">
|
||||
<img src="/assets/images/icons/close_50.svg"/>
|
||||
|
||||
</div>
|
||||
<div class="prev" *ngIf="items.length > 1">
|
||||
<img src="/assets/images/icons/left_50.svg"/>
|
||||
</div>
|
||||
<swiper [config]="config">
|
||||
<ng-template ngFor let-item [ngForOf]="items">
|
||||
<ng-template swiperSlide>
|
||||
<div class="slide">
|
||||
<img [src]="item?.links?.full"/>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</swiper>
|
||||
<div class="next" *ngIf="items.length > 1">
|
||||
<img src="/assets/images/icons/right_50.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
:host{
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -80,36 +80,7 @@ export class ImagesSectionComponent {
|
|||
}
|
||||
|
||||
show(i:number): void {
|
||||
this.parsedPhotos?.forEach((photo: any) => {
|
||||
if (photo.id === this.items[i].id) {
|
||||
this.photo = photo.links.full
|
||||
this.showFullscreen = true
|
||||
}
|
||||
})
|
||||
this.activeIndex = i;
|
||||
}
|
||||
|
||||
go(how: string) {
|
||||
this.show(this.activeIndex)
|
||||
switch(how) {
|
||||
case 'decrement':
|
||||
this.activeIndex--
|
||||
if (this.activeIndex < 0) this.activeIndex = this.parsedPhotos.length - 1
|
||||
break
|
||||
case 'increment':
|
||||
this.activeIndex++
|
||||
if (this.activeIndex == this.parsedPhotos.length) this.activeIndex = 0
|
||||
break
|
||||
}
|
||||
this.parsedPhotos = this.parsedPhotos.map((item: any, index: number) => {
|
||||
if (index === this.activeIndex) {
|
||||
item.active = true
|
||||
this.photo = item.links.full
|
||||
this.showId = item.id
|
||||
} else {
|
||||
item.active = false
|
||||
}
|
||||
return item
|
||||
})
|
||||
this.showFullscreen = true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
<div *ngIf="single" class="single">
|
||||
<img [src]="items[0].links?.full"/>
|
||||
</div>
|
||||
|
||||
<div class="top-swiper" *ngIf="!single">
|
||||
<swiper #swiper (swiper)="swiperOn($event)" (slideChange)="onSwiperChange($event)"
|
||||
[config]="config" class="swiper">
|
||||
<ng-template ngFor let-item [ngForOf]="items">
|
||||
<ng-template swiperSlide>
|
||||
<div class="slide">
|
||||
<img [src]="item?.links?.full"/>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</swiper>
|
||||
<div class="swiper-pagination"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
<swiper #thumb (swiper)="thumbOn($event)"
|
||||
*ngIf="!single" [config]="thumbConfig" class="thumb">
|
||||
<ng-template ngFor let-item [ngForOf]="items" let-i="index" (click)="select(i)">
|
||||
<ng-template swiperSlide>
|
||||
<div (click)="select(i)" class="slide">
|
||||
<img [src]="item?.links?.thumb" [class.active]="i==active"/>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</swiper>
|
||||
<div (click)="close()" *ngIf="closing" class="swiper-close">
|
||||
<ico ico="close_24" color="var(--prime)"></ico>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
.single{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit:contain;
|
||||
}
|
||||
}
|
||||
|
||||
.top-swiper{
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
position: relative;
|
||||
--swiper-navigation-color: #fff;
|
||||
--swiper-pagination-color: #fff;
|
||||
>swiper{
|
||||
height: 100%;
|
||||
img {
|
||||
object-fit:contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
.thumb{
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: calc( 20% - 10px);
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit:cover;
|
||||
&:not(.active){
|
||||
filter: brightness(50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.slide{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background-color: grey;
|
||||
cursor:w-resize;
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.swiper-close{
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
|
||||
import SwiperCore, {Navigation, Pagination, SwiperOptions} from 'swiper';
|
||||
import { SwiperComponent } from "swiper/angular";
|
||||
SwiperCore.use([Navigation, Pagination]);
|
||||
|
||||
@Component({
|
||||
selector: 'swiper-gallery',
|
||||
templateUrl: './swiper-gallery.component.html',
|
||||
styleUrls: ['./swiper-gallery.component.scss']
|
||||
})
|
||||
export class SwiperGalleryComponent {
|
||||
@Input() items: any;
|
||||
@Input() start = 0;
|
||||
@Input() closing:boolean;
|
||||
@Output() event = new EventEmitter<string>()
|
||||
@ViewChild('swiper', { static: false }) swiper?: SwiperComponent;
|
||||
@ViewChild('thumb', { static: false }) thumb?: SwiperComponent;
|
||||
public active:number;
|
||||
public single: boolean;
|
||||
|
||||
public config: SwiperOptions = {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 50,
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
}
|
||||
};
|
||||
|
||||
public thumbConfig: SwiperOptions = {
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 5,
|
||||
freeMode: true,
|
||||
watchSlidesProgress: true,
|
||||
}
|
||||
|
||||
ngOnInit(){
|
||||
this.active = this.start;
|
||||
this.single = this.items.length === 1;
|
||||
}
|
||||
|
||||
swiperOn(swiper){
|
||||
this.swiper.swiperRef.slideTo(this.start)
|
||||
}
|
||||
|
||||
onSwiperChange(event) {
|
||||
this.thumb.swiperRef.slideTo(event[0].realIndex-1)
|
||||
}
|
||||
|
||||
thumbOn(swiper){
|
||||
this.thumb.swiperRef.slideTo(this.start-2)
|
||||
}
|
||||
|
||||
select(i){
|
||||
this.active = i;
|
||||
this.thumb.swiperRef.slideTo(i)
|
||||
this.swiper.swiperRef.slideTo(i)
|
||||
}
|
||||
|
||||
close(){
|
||||
console.log('click')
|
||||
this.event.emit('close')
|
||||
}
|
||||
}
|
||||
|
|
@ -10,12 +10,15 @@ import { SwitchComponent } from './switch/switch.component';
|
|||
import { LocaleComponent } from './locale/locale.component';
|
||||
import { FileIcoComponent } from './file-ico/file-ico.component';
|
||||
import { ModalComponent } from './modal/modal.component';
|
||||
import {SwiperModule} from "swiper/angular";
|
||||
import { SwiperGalleryComponent } from './swiper-gallery/swiper-gallery.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports:[
|
||||
BrowserModule,
|
||||
RouterModule
|
||||
RouterModule,
|
||||
SwiperModule
|
||||
// QRCodeModule
|
||||
],
|
||||
declarations: [
|
||||
|
|
@ -27,6 +30,7 @@ import { ModalComponent } from './modal/modal.component';
|
|||
LocaleComponent,
|
||||
FileIcoComponent,
|
||||
ModalComponent,
|
||||
SwiperGalleryComponent,
|
||||
],
|
||||
exports: [
|
||||
IcoComponent,
|
||||
|
|
@ -36,7 +40,8 @@ import { ModalComponent } from './modal/modal.component';
|
|||
SwitchComponent,
|
||||
LocaleComponent,
|
||||
FileIcoComponent,
|
||||
ModalComponent
|
||||
ModalComponent,
|
||||
SwiperGalleryComponent
|
||||
]
|
||||
})
|
||||
export class WidjetModule {
|
||||
|
|
|
|||
|
|
@ -212,21 +212,18 @@ images-section{
|
|||
}
|
||||
}
|
||||
.center {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.slide {
|
||||
width: 600px;
|
||||
height: 450px;
|
||||
|
||||
display: block;
|
||||
img {
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-box{
|
||||
width: 100%;
|
||||
height: 50vw;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
|
||||
.fullscreen {
|
||||
top: 0;
|
||||
|
|
@ -236,69 +233,9 @@ images-section{
|
|||
z-index: 2;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(37, 46, 52, 60%);
|
||||
|
||||
.content {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
|
||||
|
||||
width: calc(100vw - 2 * 24px);
|
||||
height: calc(100vh - 2 * 24px);
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
*{
|
||||
pointer-events:all;
|
||||
}
|
||||
img {
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 72px;
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.right {
|
||||
width: 72px;
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.between{
|
||||
justify-content:space-between;
|
||||
}
|
||||
.center{
|
||||
justify-content:center;
|
||||
}
|
||||
.bottom{
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
.thumbnails{
|
||||
position: static;
|
||||
display: block;
|
||||
width: 72px;
|
||||
height: 52px;
|
||||
border: 2px solid var(--prime);
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit:cover;
|
||||
};
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue