| 4 | |
| 5 | export class Slideshow extends EventEmitter { |
| 6 | constructor(el) { |
| 7 | super(); |
| 8 | this.DOM = {el}; |
| 9 | |
| 10 | this.DOM.slides = [...this.DOM.el.querySelectorAll('.slide')]; |
| 11 | this.slides = []; |
| 12 | this.DOM.slides.forEach(slide => this.slides.push(new Slide(slide))); |
| 13 | this.slidesTotal = this.slides.length; |
| 14 | |
| 15 | this.current = 0; |
| 16 | |
| 17 | this.config = { |
| 18 | clipPath: { |
| 19 | initial: 'inset(10% 30.1% 0% 30% round 25vw 25vw 0vw 0vw)', //two equal values cause problems because browser uses shorthand |
| 20 | final: 'inset(15% 40.1% 15% 40% round 25vw 25vw 25.01vw 25.01vw)', |
| 21 | hover: 'inset(20% 40% 20.01% 40.01% round 25vw 25vw 25.01vw 25.01vw)' |
| 22 | } |
| 23 | }; |
| 24 | |
| 25 | this.init(); |
| 26 | } |
| 27 | init() { |
| 28 | this.DOM.slides[this.current].classList.add('slide--current'); |
| 29 | gsap.set(this.slides[this.current].DOM.imgWrap, {clipPath: this.config.clipPath.initial}); |