| 4 | |
| 5 | export class Slideshow extends EventEmitter { |
| 6 | constructor(el) { |
| 7 | super(); |
| 8 | // the main wrapper <div class="slideshow"> |
| 9 | this.DOM = {el}; |
| 10 | // the slides |
| 11 | this.DOM.slides = [...this.DOM.el.querySelectorAll('.slide')]; |
| 12 | // array of Slide obj instances |
| 13 | this.slides = []; |
| 14 | this.DOM.slides.forEach(slide => this.slides.push(new Slide(slide))); |
| 15 | // total number of Slides |
| 16 | this.slidesTotal = this.slides.length; |
| 17 | // current position |
| 18 | this.current = 0; |
| 19 | // some settings, like the clip paths |
| 20 | this.config = { |
| 21 | clipPath: { |
| 22 | initial: 'circle(55% at 70% 50%)', |
| 23 | final: 'circle(15% at 70% 50%)', |
| 24 | hover: 'circle(20% at 30% 50%)' |
| 25 | } |
| 26 | }; |
| 27 | this.init(); |
| 28 | } |
| 29 | init() { |
| 30 | // start with the first slide as the current slide |
| 31 | this.DOM.slides[this.current].classList.add('slide--current'); |