esc for swiper

master
Boris Voropaev 2023-12-06 12:26:09 +03:00
parent f327b6ee8b
commit b7359df3ce
2 changed files with 19 additions and 11 deletions

View File

@ -16,8 +16,11 @@
--swiper-pagination-color: #fff;
>swiper{
height: 100%;
img {
object-fit:contain;
.slide{
cursor:w-resize;
img {
object-fit:contain;
}
}
}
}
@ -27,8 +30,7 @@
height: calc( 20% - 10px);
cursor: pointer;
img {
width: 100%;
height: 100%;
object-fit:cover;
&:not(.active){
filter: brightness(50%);
@ -40,11 +42,9 @@
height: 100%;
display: block;
background-color: grey;
cursor:w-resize;
img {
object-fit: cover;
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
}
.swiper-close{

View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { Component, EventEmitter, Input, Output, ViewChild, HostListener} from '@angular/core';
import SwiperCore, {Navigation, Pagination, SwiperOptions} from 'swiper';
import { SwiperComponent } from "swiper/angular";
SwiperCore.use([Navigation, Pagination]);
@ -12,9 +12,17 @@ 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;
@HostListener('window:keydown', ['$event'])
handleKeyDown(event: KeyboardEvent) {
if (event.key === 'Escape') this.event.emit('close')
}
public active:number;
public single: boolean;
@ -36,7 +44,8 @@ export class SwiperGalleryComponent {
freeMode: true,
watchSlidesProgress: true,
}
ngOnInit(){
this.active = this.start;
this.single = this.items.length === 1;
@ -61,7 +70,6 @@ export class SwiperGalleryComponent {
}
close(){
console.log('click')
this.event.emit('close')
}
}