I'm currently working on a image slider and stuck on a problem with cleaning up and split my code into own classes. This is a simplistic and minimal version of it, so constructors and other methods were left out.

// Main class in slimSlider.js

import SliderUI from './slimSlider.ui';

class Slider {

  #addUI() {
        this.sliderUI = new SliderUI(this.opts,this.#sliderContainer,this.sliderWrapper,this.sliderElements);
  }

  #addUIEventsArrow() {
        this.sliderUI.arrowContainer.sliderButtonLeft.addEventListener('click', () => this.showPrevSlides());
        this.sliderUI.arrowContainer.sliderButtonRight.addEventListener('click', () => this.showNextSlides());
  }

  showNextSlides() {
        this.#slideTransition(false, 'right');
  }

  showPrevSlides() {
        this.#slideTransition(false, 'left');
  }

}

I want to transfer all methods that control the event listeners like #addUIEventsArrow from Slider to SliderUi class. But how can i call main class methods like this.showPrevSlides() and this.showNextSlides() from SliderUi without having the class instance and not inherit to it?

// UI class in slimslider.ui.js

export default class SliderUI {

    #addUIArrows() {
        this.arrowContainer = {}
        this.arrowContainer.wrapper = document.createElement('div');
        SliderHelpers.setElClass(this.arrowContainer.wrapper,this.#controlCssClasses.container.arrowContainer.name);
        this.arrowContainer.sliderButtonLeft = this.#addUIArrowsSingle('left');
        this.arrowContainer.sliderButtonRight = this.#addUIArrowsSingle('right');
        this.controlContainer.appendChild(this.arrowContainer.wrapper);
    }

    // final result should be something like this
    #addUIEventsArrow() {
        this.arrowContainer.sliderButtonLeft.addEventListener('click', () => this.showPrevSlides());
        this.arrowContainer.sliderButtonRight.addEventListener('click', () => this.showNextSlides());
    }

}

Would be nice if somebody can help. Thank you