esc for swiper
parent
f327b6ee8b
commit
b7359df3ce
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue