Userinterface-Jayne/testimonials.js at master · BW-Finding-Planets/Userinterface-Jayne · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
class Testimonials {
  constructor(info) {
    this.info = info;
    this.testimonials = info.querySelectorAll('.testimonial');

    this.leftButton = info.querySelector('.left-button');
    this.rightButton = info.querySelector('.right-button');

    this.currentIndex = 0;
    this.testimonials[this.currentIndex].style.display = 'block';

    this.leftButton.addEventListener('click', () => this.showLeftTestimonial());
    this.rightButton.addEventListener('click', () => this.showRightTestimonial());
  }

  showLeftTestimonial() {
    this.testimonials.forEach(testimonial => {
      testimonial.style.display = 'none';
      });
      this.currentIndex === 0 ? this.currentIndex = this.testimonials.length-1 : this.currentIndex--;
      this.testimonials[this.currentIndex].style.display = 'block';

    }

    // showLeftTestimonial() {
    //   this.testimonials.forEach(testimonial => {
    //     testimonial.style.display = 'none';
    //     });
    //     this.currentIndex === 0 ? this.currentIndex = this.testimonials.length-1 : this.currentIndex--;
    //     this.testimonials[this.currentIndex].style.display = 'block';
    //   }

  showRightTestimonial() {
    this.testimonials.forEach(testimonial => {
      testimonial.style.display = 'none';
      });
      this.currentIndex < this.testimonials.length-1 ? this.currentIndex++ : this.currentIndex = 0;
      this.testimonials[this.currentIndex].style.display = 'block';
    }
}

const info = document.querySelector('.testimonials');
new Testimonials(info);