| 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(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%)', |
| 20 | final: { |
| 21 | right: 'polygon(75% 10%, 90% 50%, 75% 90%, 10% 90%, 20% 50%, 10% 10%)', |
| 22 | left: 'polygon(90% 10%, 75% 50%, 90% 90%, 30% 90%, 10% 50%, 30% 10%)' |
| 23 | }, |
| 24 | hover: 'polygon(97% 10%, 97% 50%, 97% 87%, 3% 87%, 3% 50%, 3% 10%)' |
| 25 | } |
| 26 | }; |
| 27 | |
| 28 | this.init(); |
| 29 | } |
| 30 | init() { |
| 31 | this.DOM.slides[this.current].classList.add('slide--current'); |
| 32 | gsap.set(this.slides[this.current].DOM.imgWrap, {clipPath: this.config.clipPath.initial}); |