| 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: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)', //two equal values cause problems because browser uses shorthand |
| 20 | final: 'polygon(50% 10%, 60% 50%, 50% 90%, 40% 50%)', |
| 21 | hover: 'polygon(50% 10%, 60% 50%, 50% 90%, 40% 50%)' |
| 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}); |