Untitled

In below code add an eventlistener to preveious and next button whenever they are clicked and any number of times also console them when they are clicked
import { gsap } from "gsap";
import { tns } from "tiny-slider/src/tiny-slider";
import { fadeInUpTween } from '../utils/animations';

const quoteblockElement = ".bx-quote-block";

class QuoteBlock {
  /**
   * Construct
   *
   * @description set state and cache elements.
   *
   * @param {HTMLElement} element Target element.
   */
  constructor(element) {
    this.element = element;
    this.carousel = null;
    this.contentCarousel = null;
    this.container = this.element.querySelector(".bx-quote-block__items");
    this.authorContainer = this.element.querySelector(".bx-quote-block__content");
    this.contentContainer = this.element.querySelector(".bx-quote-block-right__content__inner");
    this.authorInnter = this.element.querySelector(".bx-quote-block__author-inner");
    this.quoteAuthorname = this.element.querySelectorAll(".bx-quote-block__authorname");
    this.quoteDesignation = this.element.querySelectorAll(".bx-quote-block__designation");
    this.quoteContent = this.element.querySelectorAll(".bx-quote-block-inner_content__inner");
    this.imageWrapperList = this.element.querySelectorAll('.bx-animation__image-wrapper');
    this.componentHeader = this.element.querySelectorAll('.bx-headers');
    this.dotNavItems = Array.from(
      this.element.querySelectorAll(".bx-dot-nav__item")
    );
    this.dotNavLinks = Array.from(
      this.element.querySelectorAll(".bx-dot-nav__item-link")
    );
    this.floaters = Array.from(
      this.element.querySelectorAll(".bx-quote-block__floater")
    );
    this.nextButton = this.element.querySelector(
      ".bx-quote-block__nav-button--next"
    );
    this.prevButton = this.element.querySelector(
      ".bx-quote-block__nav-button--prev"
    );
    this.activeSlide = 1;

    this.fadeInUpElementsTweenTo = {
			...fadeInUpTween().to,
			duration: 800,
			stagger: 400,
		};

    this.initQuoteBlock();
    this.handleDotNacheckActivelick();
    this.initAnimation();
  }

  /**
   * Initialize Quote Block
   *
   * @description initialize Quote Block.
   */
  initQuoteBlock() {
    this.carousel = tns({
      arrowKeys: true,
      container: this.container,
      nav: false,
      loop: false,
      rewind: true,
      nextButton: this.nextButton,
      prevButton: this.prevButton,
      swipeAngle: 30,
      useLocalStorage: false,
      autoHeight: true,
      preventScrollOnTouch: "auto",
      speed: 0
    });


    this.contentCarousel = tns({
      arrowKeys: true,
      container: this.contentContainer,
      nav: false,
      nextButton: this.nextButton,
      prevButton: this.prevButton,
      loop: false,
      rewind: true,
      swipeAngle: 30,
      useLocalStorage: false,
      autoHeight: true,
      preventScrollOnTouch: "auto",
      speed: 0
    });

    this.carousel.events.on("indexChanged", info => {
      this.handleTextAnimation(info.index)
      this.setActiveDot(info.displayIndex);
      this.setActiveFloater(info.displayIndex);
      this.activeSlide = info.displayIndex;
      if(this.componentHeader.length===0){
        this.element.setAttribute("aria-labelledby",this.quoteAuthorname[info.index].getAttribute("id"));
      }
    });

    this.contentCarousel.events.on("indexChanged", info => {
      this.setActiveDot(info.displayIndex);
      this.setActiveFloater(info.displayIndex);
      this.activeSlide = info.displayIndex;
     
    });
  }

  /**
   * Set Active Dot
   *
   * @description set, toggle and animate the active dot.
   *
   * @param {number} number Dot to make active.
   */
  setActiveDot(number) {
    if (number === this.activeSlide) {
      return;
    }

    this.dotNavItems.forEach((dotElement, index) => {
      /**
       * Update class
       */
      if (number !== index + 1) {
        dotElement.classList.remove(
          "bx-dot-nav__item--active",
          number !== index + 1
        );
        return;
      }

      dotElement.classList.add("bx-dot-nav__item--active");

      /**
       * Setup
       */
      const svg = dotElement.querySelector(".bx-quote-block__nav-item-icon");
      const dotStroke = dotElement.querySelector(".bx-dot-nav__item-stroke");
      const { circumference } = svg.dataset;

      /**
       * Timeline
       */
      gsap
        .timeline({ defaults: { duration: 1000 } })
        .set(dotStroke, { attr: { "stroke-dasharray": `0 ${circumference}` } })
        .to(dotStroke, { attr: { "stroke-dasharray": `${circumference} 0` }});
    });
  }

  initAnimation() {
    /**
     * Setup
     */
    const scrollTrigger = {
      start: '50% 90%',
    };

    function curtainAnimation(imageWrapper) {
      imageWrapper.children[0].classList.add("bx-animation__curtain");
      imageWrapper.children[1].children[0].classList.add("bx-animation__curtain-image");
    }

    /**
     * Image Animation
     */
    this.imageWrapperList.forEach((imageWrapper, index) => {
      if (index === 0) {
        gsap.timeline({ scrollTrigger: { trigger: imageWrapper, ...scrollTrigger, onEnter: () => curtainAnimation(imageWrapper) } })
      }

    })

    this.quoteAuthorname.forEach((author, index) => {
      if (index === 0) {
        gsap.set(this.authorInnter, fadeInUpTween().set);
        gsap.timeline({ scrollTrigger: { trigger: author, ...scrollTrigger} }).to(this.authorInnter, this.fadeInUpElementsTweenTo);
      }
    })

    this.quoteDesignation.forEach((designation, index) => {
      if (index === 0) {
        gsap.set(this.authorInnter, fadeInUpTween().set);
        gsap.timeline({ scrollTrigger: { trigger: designation, ...scrollTrigger} }).to(this.authorInnter, this.fadeInUpElementsTweenTo);
      }
    })

    this.quoteContent.forEach((content, index) => {
      if (index === 0) {
        gsap.set(content, fadeInUpTween().set);
        gsap.timeline({ scrollTrigger: { trigger: content, ...scrollTrigger} }).to(content, this.fadeInUpElementsTweenTo);
      }
    })

    window.onload = () => {
      this.nextButton?.setAttribute( "tabindex", "0" );
      this.prevButton?.setAttribute( "tabindex", "0" );
    };
  }

  /*Handle Text Animation*/
  handleTextAnimation(selectedIndex) {
    [...this.imageWrapperList].map(x => {
      x.children[0].classList.remove("bx-animation__curtain");
      x.children[1].children[0].classList.remove("bx-animation__curtain-image");
    });

    this.quoteAuthorname.forEach((author, index) => {
      if (selectedIndex === index) {
        gsap.set(author, fadeInUpTween().set);
        gsap.set(this.quoteDesignation[index], fadeInUpTween().set);
        gsap.set(this.quoteContent[index], fadeInUpTween().set);
        gsap.timeline()
        .to(author, this.fadeInUpElementsTweenTo)
        .to(this.quoteDesignation[index], this.fadeInUpElementsTweenTo, '<')
        .to(this.quoteContent[index], this.fadeInUpElementsTweenTo, '<');
      }
    })

    this.imageWrapperList.forEach((imageWrapper, index) => {
      if (selectedIndex === index) {
        imageWrapper.children[0].classList.add("bx-animation__curtain");
        imageWrapper.children[1].children[0].classList.add("bx-animation__curtain-image");
      }
    })
  }

  /**
   * Handle Dot Nav Click
   *
   * @description handle dot nav click.
   */
  handleDotNacheckActivelick() {
    this.dotNavLinks.forEach(dotLink => {
      dotLink.addEventListener("click", event => {

        event.preventDefault();
        const { index } = dotLink.dataset;
        this.carousel.goTo(index - 1);
        this.contentCarousel.goTo(index - 1);

      });
    });
  }



  /**
   * Set Active Floater
   *
   * @description set, toggle and animate the active dot.
   *
   * @param {number} number Floater to make active.
   */
  setActiveFloater(number) {
    this.floaters.forEach((floaterElement, index) => {
      if (number !== index + 1) {
        floaterElement.setAttribute("aria-hidden", true);
        return;
      }

      floaterElement.setAttribute("aria-hidden", false);
    });
  }
}

export { QuoteBlock, quoteblockElement };